/* Google Fonts (ONLY). */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* Apply Source Code Pro uniformly across the app */
html, body {
  font-family: "Source Code Pro";
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  /* Prevent the root page from scrolling; app views handle their own scrolling. */
  height: 100%;
  overflow: hidden;
}

/* Ensure form controls inherit the app font */
button, input, select, textarea {
  font-family: inherit;
  font-optical-sizing: auto;
  font-weight: inherit;
}

/* src/styles/app.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: inherit;
  background-color: var(--app-bg);
  color: var(--app-text);
  overflow: hidden;
}

body.t2g-no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* Ctrl+Alt combo zoom: hide cursors everywhere to reduce accidental page zoom/selection feel. */
body.t2g-ctrl-alt-zoom,
body.t2g-ctrl-alt-zoom * {
  cursor: none !important;
}

/* Disable text selection site-wide (keep inputs selectable) */
html, body, #app {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

:root {
  --chart-max-height: 900px;
  --t2g-font-ui: "Source Code Pro";
  --t2g-font-numeric: var(--t2g-font-ui);
  --t2g-weight-body: 400;
  --t2g-weight-numeric: 500;
  --t2g-weight-numeric-strong: 600;
  /* Theme anchor colors (used for inverse/contrast UI elements) */
  --t2g-theme-bg-dark: #0f0f0f;
  --t2g-theme-bg-light: #f4f4f4;
  /* Main nav active-tab foreground: invert for contrast */
  --t2g-main-tab-active-fg: var(--t2g-theme-bg-light);
  /* Fullscreen transition helpers */
  --t2g-fs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t2g-fs-dur: 220ms;
  --t2g-layout-gap: 12px;
  --t2g-edge-gap: 4px;
  --t2g-header-h: 56px;
  --t2g-main-nav-width: 220px;
  --t2g-main-nav-collapsed-width: 64px;
  /* Theme variables (default to dark) */
  --app-bg: #0f0f0f;
  --app-text: #f0f0f0;
  --focus-outline: rgba(255, 255, 255, 0.22);
  --select-chevron: rgba(255, 255, 255, 0.65);
  --select-divider: rgba(255, 255, 255, 0.14);
  --header-bg: rgba(255, 255, 255, 0.06);
  --header-border: rgba(255, 255, 255, 0.08);
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-hover-bg: rgba(255, 255, 255, 0.12);
  --btn-border: rgba(255, 255, 255, 0.12);
  /* Surfaces */
  --panel-bg: rgba(255, 255, 255, 0.06);
  --panel-border: rgba(255, 255, 255, 0.08);
  --menu-bg: rgba(27, 27, 27, 1);
  --menu-border: rgba(255, 255, 255, 0.12);
  --overlay-bg: rgba(0, 0, 0, 0.50);
  --overlay-border: rgba(255, 255, 255, 0.06);
  /* Symbol pill (top-left inside chart) */
  --t2g-symbol-pill-bg: var(--overlay-bg);
  --t2g-symbol-pill-border: var(--overlay-border);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.08);
  --badge-bg: rgba(255, 255, 255, 0.06);
  --muted-text: #b0b0b0;
  --chart-bg: var(--app-bg);
  color-scheme: dark;

  /* Accent colors (user configurable via Settings → Canvas → Accents) */
  --t2g-accent-green: #26a69a;
  --t2g-accent-red: #ef5350;
  /* Text color to place on top of accents (set dynamically when accents are customized) */
  --t2g-on-accent-green: #ffffff;
  --t2g-on-accent-red: #ffffff;
  /* Accent-as-text on neutral surfaces (can be overridden dynamically for contrast) */
  --t2g-accent-green-text: var(--t2g-accent-green);
  --t2g-accent-red-text: var(--t2g-accent-red);
  /* RGB triplets to enable rgba(var(...), a) usage */
  --t2g-accent-green-rgb: 38, 166, 154;
  --t2g-accent-red-rgb: 239, 83, 80;

  /* Common alpha variants */
  --t2g-accent-green-80: rgba(var(--t2g-accent-green-rgb), 0.8);
  --t2g-accent-red-80: rgba(var(--t2g-accent-red-rgb), 0.8);
  --t2g-accent-green-20: rgba(var(--t2g-accent-green-rgb), 0.2);
  --t2g-accent-red-20: rgba(var(--t2g-accent-red-rgb), 0.2);
  --t2g-accent-green-40: rgba(var(--t2g-accent-green-rgb), 0.4);
  --t2g-accent-red-40: rgba(var(--t2g-accent-red-rgb), 0.4);
  --t2g-accent-green-60: rgba(var(--t2g-accent-green-rgb), 0.6);
  --t2g-accent-red-60: rgba(var(--t2g-accent-red-rgb), 0.6);
}

/* Toast appearance variables (defaults, overridden per theme below) */
:root {
  --toast-bg: rgba(0, 0, 0, 0.36);
  --toast-border: rgba(255, 255, 255, 0.06);
  --toast-glow: rgba(0, 0, 0, 0.35);
}

/* Light/Dark theme overrides */
:root[data-theme="dark"] {
  --app-bg: #0f0f0f;
  --app-text: #f0f0f0;
  --focus-outline: rgba(255, 255, 255, 0.22);
  --select-chevron: rgba(255, 255, 255, 0.65);
  --select-divider: rgba(255, 255, 255, 0.14);
  --header-bg: rgba(255, 255, 255, 0.06);
  --header-border: rgba(255, 255, 255, 0.08);
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-hover-bg: rgba(255, 255, 255, 0.12);
  --btn-border: rgba(255, 255, 255, 0.12);
  --panel-bg: rgba(255, 255, 255, 0.06);
  --panel-border: rgba(255, 255, 255, 0.08);
  --menu-bg: rgba(27, 27, 27, 1);
  --menu-border: rgba(255, 255, 255, 0.12);
  --overlay-bg: rgba(0, 0, 0, 0.50);
  --overlay-border: rgba(255, 255, 255, 0.06);
  /* In dark theme, make the symbol pill slightly lighter (less "black on black"). */
  --t2g-symbol-pill-bg: rgba(255, 255, 255, 0.08);
  --t2g-symbol-pill-border: rgba(255, 255, 255, 0.12);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.08);
  --badge-bg: rgba(255, 255, 255, 0.06);
  --muted-text: #b0b0b0;
  --chart-bg: #0f0f0f;
  color-scheme: dark;

  /* Dark theme: use the light-theme background as the icon/text color */
  --t2g-main-tab-active-fg: var(--t2g-theme-bg-light);

  /* Toast in dark theme: subtle darker glass with light border and soft glow */
  --toast-bg: rgba(10, 10, 10, 0.48);
  --toast-border: rgba(255, 255, 255, 0.06);
  --toast-glow: rgba(38, 166, 154, 0.06);
}

:root[data-theme="light"] {
  --app-bg: #f4f4f4;
  --app-text: #0f0f0f;
  --focus-outline: rgba(0, 0, 0, 0.22);
  --select-chevron: rgba(0, 0, 0, 0.55);
  --select-divider: rgba(0, 0, 0, 0.12);
  --header-bg: rgba(0, 0, 0, 0.04);
  --header-border: rgba(0, 0, 0, 0.07);
  --btn-bg: rgba(0, 0, 0, 0.08);
  --btn-hover-bg: rgba(0, 0, 0, 0.12);
  --btn-border: rgba(0, 0, 0, 0.12);
  /* Light theme finish: soft gray fills + near-white borders */
  --panel-bg: #cecece;
  --panel-border: #8f8f8f;
  --menu-bg: #aaaaaa;
  --menu-border: #8f8f8f;
  --overlay-bg: rgba(255, 255, 255, 0.50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  /* In light theme, make the symbol pill slightly darker for contrast. */
  --t2g-symbol-pill-bg: rgba(0, 0, 0, 0.10);
  --t2g-symbol-pill-border: rgba(0, 0, 0, 0.14);
  --chip-bg: #aaaaaa;
  --chip-border: #8f8f8f;
  --badge-bg: #818181;
  --muted-text: #4d4d4d;
  --chart-bg: #f0f0f0;
  color-scheme: light;

  /* Light theme: use the dark-theme background as the icon/text color */
  --t2g-main-tab-active-fg: var(--t2g-theme-bg-dark);

  /* Toast in light theme: light glass (frosted) with subtle dark border and faint glow */
  --toast-bg: rgba(255, 255, 255, 0.72);
  --toast-border: rgba(0, 0, 0, 0.06);
  --toast-glow: rgba(0, 0, 0, 0.06);
}

/* Theme-aware inversion for grayscale color chips (Settings modal).
   Applied via JS only when: dark theme + grayscale + opacity >= 1% + dark gray. */
.t2g-invert-chip {
  filter: invert(1);
}

/* Entry axis label styling for Lightweight Charts (TradingView Lightweight Charts) */
.lwc-entry-axis-label {
  background-color: var(--t2g-accent-green) !important;
  color: var(--t2g-on-accent-green) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 4px !important;
  border-radius: 2px !important;
  /* Keep labels readable above chart surfaces/overlays. */
  position: relative;
  z-index: 2000;
  margin: 0 6px !important;
}

.lwc-entry-axis-label.short {
  background-color: var(--t2g-accent-red) !important;
  color: var(--t2g-on-accent-red) !important;
}

#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--t2g-header-h);
  position: relative;
  overflow: hidden;
}

body.t2g-main-nav-collapsed {
  --t2g-main-nav-width: var(--t2g-main-nav-collapsed-width);
}

#app.t2g-header-hidden {
  padding-top: 0;
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px; /* No horizontal padding, handled internally OLD: 0 16px*/;
  height: var(--t2g-header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--header-border);
  z-index: 1500;
  gap: 12px;
  flex-wrap: nowrap;
  max-width: 100vw;
  /* Allow dropdowns/modals anchored in the header to overflow over the canvas. */
  overflow: visible;
  transition: transform 180ms ease, opacity 180ms ease;
}

.t2g-shell {
  flex: 1;
  display: flex;
  min-height: 0;
  width: 100%;
}

/* Right-side content column: active view area + persistent bottom panel */
.t2g-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.t2g-main-nav {
  position: sticky;
  top: var(--t2g-header-h);
  height: calc(100vh - var(--t2g-header-h));
  flex: 0 0 var(--t2g-main-nav-width);
  width: var(--t2g-main-nav-width);
  overflow: visible;
  border-right: 1px solid var(--header-border);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: width 180ms ease;
  /* Keep docked toolbox popovers above the bottom Positions/History overlay (z-index: 1300). */
  z-index: 1400;
}

.t2g-main-nav__inner {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
}

.t2g-main-nav__bottom {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 10px;
  padding-bottom: 12px;
  overflow: visible;
}

.t2g-main-nav__bottom .t2g-drawing-tools {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  /* Establish a stacking context above other overlays when docked. */
  position: relative;
  z-index: 1450;
}

/* Toolbox labels: hidden by default (icon-only), shown when nav is expanded. */
.t2g-drawing-tools .t2g-tool-label {
  display: none;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools {
  width: 100%;
  align-items: stretch;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-btn {
  width: 100%;
  height: 40px;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--app-text);
  opacity: 0.9;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-btn:hover:not(:disabled) {
  background: rgba(var(--t2g-accent-red-rgb), 0.12);
  border-color: rgba(var(--t2g-accent-red-rgb), 0.45);
  opacity: 1;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-btn.is-active {
  background: rgba(var(--t2g-accent-green-rgb), 0.14);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--t2g-accent-green-rgb), 0.10) inset;
  color: var(--t2g-main-tab-active-fg);
  opacity: 1;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-btn svg,
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-btn .t2g-line-icon,
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-btn .t2g-pointer-icon {
  flex: 0 0 auto;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-label {
  display: block;
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-pointer-btn,
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-line-btn {
  padding: 10px 12px;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-pointer-caret,
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-line-caret {
  margin-left: auto;
  opacity: 0.7;
}

body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-tool-delete {
  margin-top: 6px;
  padding-top: 10px;
}

/* When the main nav is expanded, toolbox sub-menus should slide OUT to the right
   of the sidebar (over the chart), not open inside the widened button column. */
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-pointer-menu,
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-line-menu,
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-indicators-menu,
body:not(.t2g-main-nav-collapsed) .t2g-main-nav__bottom .t2g-drawing-tools .t2g-levels-menu {
  left: calc(100% + 10px) !important;
  right: auto !important;
  transform: translateX(-6px) !important;
}

body.t2g-main-nav-collapsed .t2g-main-nav__inner {
  padding: 8px;
}

.t2g-main-nav__toggle {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--app-text);
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.t2g-main-nav__toggle-icon {
  display: block;
}

.t2g-main-nav__toggle-line {
  transform-origin: left center;
  transform-box: fill-box;
  transition: transform 220ms ease, opacity 220ms ease;
}

.t2g-main-nav__toggle-line--top {
  transform: scaleX(1);
}

.t2g-main-nav__toggle-line--mid {
  transform: scaleX(0.75);
  opacity: 0.85;
}

.t2g-main-nav__toggle-line--bot {
  transform: scaleX(0.55);
  opacity: 0.75;
}

body.t2g-main-nav-collapsed .t2g-main-nav__toggle-line--top {
  transform: scaleX(0.55);
  opacity: 0.75;
}

body.t2g-main-nav-collapsed .t2g-main-nav__toggle-line--mid {
  transform: scaleX(0.75);
  opacity: 0.85;
}

body.t2g-main-nav-collapsed .t2g-main-nav__toggle-line--bot {
  transform: scaleX(1);
  opacity: 1;
}

.t2g-main-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.t2g-main-tab {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--app-text);
  font: inherit;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  opacity: 0.9;
}

.t2g-main-tab > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--app-text);
}

.t2g-main-tab__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--app-text);
}

/* When a main tab is disabled (e.g. Charting locked), dim just the label text. */
.t2g-main-tab.is-disabled .t2g-main-tab__label,
.t2g-main-tab[aria-disabled="true"] .t2g-main-tab__label {
  opacity: 0.5;
}

body.t2g-main-nav-collapsed .t2g-main-tab {
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
  gap: 0;
}

body.t2g-main-nav-collapsed .t2g-main-tab__label {
  display: none;
}

.t2g-main-tab:hover {
  background: rgba(var(--t2g-accent-red-rgb), 0.12);
  border-color: rgba(var(--t2g-accent-red-rgb), 0.45);
  opacity: 1;
}

.t2g-main-tab:hover > svg {
  color: rgb(var(--t2g-accent-red-rgb));
}

/* Disabled tabs should not show the negative-accent hover state. */
.t2g-main-tab.is-disabled:hover,
.t2g-main-tab[aria-disabled="true"]:hover {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  opacity: 0.9;
}

.t2g-main-tab.is-disabled:hover > svg,
.t2g-main-tab[aria-disabled="true"]:hover > svg {
  color: var(--app-text);
}

.t2g-main-tab.is-active {
  opacity: 1;
  background: rgba(var(--t2g-accent-green-rgb), 0.14);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--t2g-accent-green-rgb), 0.10) inset;
  color: var(--t2g-main-tab-active-fg);
}

.t2g-main-tab.is-active > svg {
  color: var(--t2g-main-tab-active-fg);
}

.t2g-main-tab.is-active .t2g-main-tab__label {
  color: var(--t2g-main-tab-active-fg);
}

.app-header--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.t2g-top-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
}

.t2g-top-tab {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}

.t2g-top-tab:hover {
  background: rgba(var(--t2g-accent-red-rgb), 0.12);
  border-color: rgba(var(--t2g-accent-red-rgb), 0.45);
  opacity: 1;
}

.t2g-top-tab.is-active {
  opacity: 1;
  background: rgba(var(--t2g-accent-green-rgb), 0.14);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--t2g-accent-green-rgb), 0.10) inset;
}

:root.t2g-embed .t2g-top-tabs {
  display: none;
}

:root.t2g-embed .t2g-main-nav {
  display: none;
}

.t2g-views {
  position: relative;
  flex: 1;
  min-height: 0;
}

.t2g-bottom-panel {
  /* Fixed on all member tabs (non-fullscreen). */
  position: fixed;
  left: calc(var(--t2g-edge-gap) + var(--t2g-main-nav-width));
  right: var(--t2g-edge-gap);
  bottom: var(--t2g-edge-gap);
  z-index: 1300;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
  min-height: 0;
}

.t2g-bottom-panel > * {
  pointer-events: auto;
}

.t2g-view {
  position: absolute;
  /* Keep all main views lifted above the fixed bottom panel. */
  inset: 0 0 var(--t2g-main-bottom-offset, 0px) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.t2g-view.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* These views need to scroll within the available area (now reduced by the bottom panel). */
.t2g-view--dashboard,
.t2g-view--news {
  overflow: auto;
}

.t2g-muted {
  color: var(--muted-text);
}

.t2g-dashboard-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 4px;
}

.t2g-account-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.t2g-account-switcher__label {
  font-size: 0.72rem;
  letter-spacing: 0.2px;
  color: var(--muted-text);
}

.t2g-account-switcher .form-input {
  min-width: 260px;
}

.t2g-account-switcher__meta {
  font-size: 0.72rem;
}

/* Dashboard: Account panel needs to allow dropdown menus to overflow.
   The base `.panel` and `.panel-body` use `overflow: hidden/auto` for rounded corners/scrolling,
   which clips the Glass Select menu. Scope the fix to this one panel. */
.t2g-account-panel {
  overflow: visible;
  position: relative;
  z-index: 10;
}

.t2g-account-panel > .panel-body {
  overflow: visible;
}

/* When open, ensure the select (and its menu) stack above the meta/rules text and the next cards. */
.t2g-account-panel .t2g-glass-select.is-open {
  z-index: 5000;
}

.t2g-account-panel .t2g-glass-select__menu {
  z-index: 5001;
}

.t2g-challenge-panel {
  border-color: rgba(255, 120, 120, 0.35);
}

.t2g-challenge-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.t2g-challenge-status {
  font-weight: 600;
  color: rgba(255, 120, 120, 0.95);
}

.t2g-challenge-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

/* News view should use full width instead of 3-column dashboard grid */
.t2g-view--news .t2g-dashboard-wrap {
  grid-template-columns: 1fr;
}

.t2g-view--news .panel {
  grid-column: 1 / -1;
}

.t2g-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.t2g-collapse-btn {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--muted-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.t2g-collapse-btn:hover {
  color: var(--app-text);
}

.panel.is-collapsed .panel-body {
  display: none;
}

/* Manage tab: recordings/captures list items */
.t2g-manage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  border-radius: 12px;
  margin: 8px 0;
}

.t2g-manage-item__thumb {
  flex: 0 0 auto;
}

.t2g-manage-video-wrap {
  width: 200px;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-border);
}

.t2g-manage-video-wrap[role="button"] {
  cursor: pointer;
}

.t2g-manage-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.25);
}

.t2g-manage-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.42));
  color: rgba(255,255,255,0.92);
  font-size: 28px;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.t2g-manage-video-wrap[data-playing="1"] .t2g-manage-video-play {
  opacity: 0;
  pointer-events: none;
}

.t2g-manage-item__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.t2g-manage-item__name {
  font-weight: 650;
  word-break: break-word;
}

.t2g-manage-item__sub {
  color: var(--muted-text);
  font-size: 0.82rem;
  margin-top: 4px;
}

.t2g-manage-item__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.t2g-manage-video-modal__player {
  width: 100%;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.t2g-manage-video-player {
  width: 100%;
  max-height: 70vh;
  display: block;
  background: rgba(0, 0, 0, 0.25);
}

.t2g-manage-video-modal__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

@media (max-width: 720px) {
  .t2g-manage-item {
    align-items: flex-start;
  }
  .t2g-manage-video-wrap {
    width: 160px;
  }
  .t2g-manage-item__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.t2g-stats-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.t2g-stat-card {
  border-radius: 10px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.t2g-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.35px;
  color: var(--muted-text);
  text-transform: uppercase;
}

.t2g-stat-hint {
  font-size: 0.65rem;
  opacity: 0.8;
  text-transform: none;
  letter-spacing: 0;
}

.t2g-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
}

.t2g-stats-meta {
  margin-top: 10px;
  font-size: 0.82rem;
}

.t2g-cal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.t2g-cal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.t2g-cal-month {
  font-weight: 800;
  min-width: 160px;
  text-align: center;
  opacity: 0.95;
}

.t2g-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.t2g-cal-dow {
  font-size: 0.64rem;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--muted-text);
  text-align: center;
  padding: 4px 0;
}

.t2g-cal-cell {
  border-radius: 10px;
  padding: 8px;
  min-height: 54px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.t2g-cal-cell.is-empty {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  cursor: default;
}

.t2g-cal-cell.is-profit {
  border-color: var(--t2g-accent-green-40);
  background: var(--t2g-accent-green-20);
}

.t2g-cal-cell.is-loss {
  border-color: var(--t2g-accent-red-40);
  background: var(--t2g-accent-red-20);
}

.t2g-cal-cell.is-today {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18) inset;
}

.t2g-cal-cell.is-weekend {
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
}

.t2g-cal-daynum {
  font-weight: 800;
  font-size: 0.82rem;
}

.t2g-cal-pnl {
  margin-top: 4px;
  font-size: 0.75rem;
  opacity: 0.95;
}

.t2g-cal-week-label {
  margin-top: 2px;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.7;
}

.t2g-calendar-legend {
  margin-top: 10px;
  font-size: 0.82rem;
}

.t2g-calendar-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.t2g-calendar-notes__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.t2g-calendar-notes__title {
  font-weight: 800;
  font-size: 0.8rem;
}

.t2g-calendar-notes__meta {
  font-size: 12px;
  opacity: 0.75;
}

.t2g-calendar-notes textarea.form-input {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  min-height: 92px;
  resize: vertical;
}

.t2g-cal-cell.is-selected {
  box-shadow: 0 0 0 2px rgba(var(--t2g-accent-green-rgb), 0.35) inset;
}

.t2g-cal-journal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 6px;
}

.t2g-cal-journal svg {
  width: 14px;
  height: 14px;
}

.t2g-trades-table-wrap {
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.t2g-trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.t2g-trades-table th,
.t2g-trades-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.t2g-trades-table th {
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--muted-text);
}

.t2g-trades-table td.num,
.t2g-trades-table th.num {
  text-align: right;
}

@media (max-width: 980px) {
  .t2g-stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t2g-cal-month { min-width: 120px; }
}

@media (max-width: 520px) {
  .t2g-stats-cards { grid-template-columns: 1fr; }
}

.t2g-dashboard-security-banner {
  grid-column: 1 / -1;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.t2g-dashboard-security-banner.is-warning {
  border-color: rgba(255, 205, 102, 0.35);
  background: rgba(255, 205, 102, 0.10);
}

.t2g-dashboard-security-banner.is-danger {
  border-color: var(--t2g-accent-red-40);
  background: var(--t2g-accent-red-20);
}

@media (max-width: 980px) {
  .t2g-dashboard-wrap { grid-template-columns: 1fr; }
}

.app-header .brand {
  font-weight: 600;
  letter-spacing: 0.4px;
}

.t2g-header-left {
  display: flex;
  align-items: center;
  /* gap: 12px; */
  flex: 1;
  min-width: 0;
}

.t2g-header-brand-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  white-space: nowrap;
}

.t2g-pnl-grid {
  display: flex;
  gap: 0;
  font-size: 0.7rem;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.t2g-pnl-cell {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  margin-right: 4px;
  width: 132px;
  max-width: 220px;
  overflow: hidden;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    max-width 200ms ease,
    margin-right 200ms ease,
    padding 200ms ease;
}

.t2g-pnl-cell:last-child {
  margin-right: 0;
}

.t2g-pnl-cell.is-collapsed {
  opacity: 0;
  transform: translateX(-8px);
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  pointer-events: none;
}

.t2g-pnl-label {
  font-size: 0.55rem;
  letter-spacing: 0.35px;
  color: var(--muted-text);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t2g-pnl-value {
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}

.app-header .chart-titlebar {
  width: 100%;
  flex: 1 1 0;
  min-width: 0;
}

.entry-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.entry-mode-btn {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 16px;
  border-radius: 8px;
  opacity: 0.85;
}

.entry-mode-btn.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
}

.app-header select, .app-header button,
.chart-titlebar select, .chart-titlebar button {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* Modern dropdown styling (keeps existing dark theme colors) */
#app select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 16px;
  padding: 6px 38px 6px 10px;
  border-radius: 8px;
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--app-text);
  /* chevron + subtle divider */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.25 4.5 6 8.25 9.75 4.5' fill='none' stroke='rgba(255%2C255%2C255%2C0.65)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(to right, var(--select-divider), var(--select-divider));
  background-position:
    right 12px center,
    right 32px center;
  background-size:
    12px 12px,
    1px 18px;
  background-repeat: no-repeat;
}

#app select:hover {
  background-color: var(--btn-hover-bg);
}

#app select:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

#app select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#app select option,
#app select optgroup {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.chart-titlebar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.t2g-titlebar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.t2g-signed-in-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  min-width: 0;
  max-width: 180px;
  font-size: 12px;
  line-height: 1.2;
}

.t2g-signed-in-chip__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted-text);
}

.t2g-signed-in-chip__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.t2g-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;
}

.t2g-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.t2g-icon-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.22);
  outline-offset: 2px;
}

.t2g-tv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t2g-chart-mode-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t2g-chart-mode-selector label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-text);
}

.t2g-chart-mode-selector select {
  min-width: 120px;
}

/* Settings Cog Button (titlebar) */
.t2g-settings-cog-btn {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.t2g-settings-cog-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-settings-cog-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Header settings dropdown (cog) */
.t2g-titlebar-right {
  position: relative;
}

/* Notifications Bell (titlebar) */
.t2g-notifications-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* When notifications menu is open, blur content behind it */
.t2g-notifications-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--t2g-header-h);
  bottom: 0;
  z-index: 54;
  background: rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
}

:root[data-theme="light"] .t2g-notifications-backdrop {
  background: rgba(255, 255, 255, 0.08);
}

.t2g-notifications-btn {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.t2g-notifications-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-notifications-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.t2g-notifications-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--t2g-accent-red);
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.t2g-notifications-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 70vw);
  /* Theme-aware frosted glass (matches toast + glass modals) */
  background: var(--toast-bg);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--toast-border);
  border-radius: 10px;
  overflow: hidden;
  z-index: 55;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), 0 1px 0 1px rgba(255,255,255,0.03) inset;

  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: none;
}

.t2g-notifications-menu.is-open {
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.t2g-notifications-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--toast-border);
}

.t2g-notifications-menu__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--muted-text);
}

.t2g-notifications-clear {
  background: transparent;
  border: 1px solid var(--btn-border);
  color: var(--app-text);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.t2g-notifications-clear:hover {
  background: rgba(255, 255, 255, 0.06);
}

.t2g-notifications-menu__list {
  max-height: 360px;
  overflow: auto;
}

.t2g-notification-empty {
  padding: 12px;
  color: var(--muted-text);
  font-size: 13px;
}

.t2g-notification-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--toast-border);
}

.t2g-notification-item:last-child {
  border-bottom: 0;
}

.t2g-notification-message {
  font-size: 13px;
  font-weight: 700;
  color: var(--app-text);
  line-height: 1.25;
  word-break: break-word;
}

.t2g-notification-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-text);
}

.t2g-notification-item--error .t2g-notification-message {
  color: #ffb0b0;
}

.t2g-notification-item--success .t2g-notification-message {
  color: var(--t2g-accent-green-text);
}

.t2g-header-settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  z-index: 50;

  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: none;
}

.t2g-header-settings-menu.is-open {
  /* increased from 240px to better contain taller dropdowns */
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.t2g-header-settings-item {
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.t2g-header-settings-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.t2g-header-settings-item:disabled,
.t2g-header-settings-item[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.t2g-header-settings-item--danger {
  color: var(--t2g-accent-red);
}

/* Theme Toggle Button (titlebar) */
.t2g-theme-toggle-btn {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.t2g-theme-toggle-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-theme-toggle-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Fullscreen Button (titlebar) */
.t2g-fullscreen-btn {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

.t2g-fullscreen-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-fullscreen-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Chart Layout Button (titlebar) */
.t2g-chart-layout-btn {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.t2g-chart-layout-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-chart-layout-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.t2g-menu-group-title {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  color: var(--muted-text);
}

/* Tighter spacing for the entry settings dropdown */
.t2g-entry-settings-menu {
  padding: 4px;
}

.t2g-entry-settings-menu .t2g-menu-group-title {
  padding: 6px 10px 4px;
}

.t2g-entry-settings-menu .t2g-context-item {
  padding: 8px 10px;
}

.t2g-context-item.entry-mode-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
}

.t2g-tv-toggle__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--muted-text);
}

.t2g-switch {
  position: relative;
  width: 44px;
  height: 22px;
  display: inline-block;
}

.t2g-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.t2g-switch__slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.t2g-switch__slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  transition: transform 120ms ease, background 120ms ease;
}

.t2g-switch input:checked + .t2g-switch__slider {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

.t2g-switch input:checked + .t2g-switch__slider::before {
  transform: translate(22px, -50%);
  background: rgba(255, 255, 255, 0.88);
}

.t2g-switch input:focus-visible + .t2g-switch__slider {
  outline: 2px solid rgba(255, 255, 255, 0.22);
  outline-offset: 2px;
}

.chart-titlebar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: #b0b0b0;
}

.app-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  padding: 4px;
  flex: 1;
  overflow: auto;
}

/* Charting view now uses the left main nav rail; hide the legacy charting sidebar
   so the canvas doesn't reserve an extra blank column. */
body:not(.t2g-fullscreen-chart) #t2g-view-charting.app-grid {
  grid-template-columns: 1fr;
}

body:not(.t2g-fullscreen-chart) #t2g-view-charting .sidebar-left {
  display: none !important;
}

/* Charting: reduce right-side outer gutter (fixes the pure-black strip on the far right). */
/* #t2g-view-charting.app-grid {
  padding-right: 4px;
} */

/* Left sidebar (Watchlist + embedded ticket) can be tucked away.
   Markup stays in DOM so it can be restored later by removing the body class. */
body.t2g-left-sidebar-hidden .app-grid {
  grid-template-columns: 1fr;
}

body.t2g-left-sidebar-hidden .sidebar-left {
  display: none !important;
}

/* Embed mode (e.g. homepage iframe): keep only header + chart */
:root.t2g-embed body {
  overflow: hidden;
}

:root.t2g-embed .app-grid {
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

:root.t2g-embed .sidebar-left,
:root.t2g-embed .sidebar-right,
:root.t2g-embed .positions-orders-panel,
:root.t2g-embed .t2g-po-resizer,
:root.t2g-embed .t2g-bottom-panel {
  display: none !important;
}

:root.t2g-embed .chart-panel {
  max-height: none;
  border-radius: 0;
}

:root.t2g-embed .chart-container {
  max-height: none;
  height: calc(100vh - var(--t2g-header-h));
}

/* Smooth fullscreen transitions: panels slide out while chart expands */
.sidebar-left,
.sidebar-right,
.positions-orders-panel {
  transition: transform var(--t2g-fs-dur) var(--t2g-fs-ease), opacity var(--t2g-fs-dur) var(--t2g-fs-ease);
  will-change: transform, opacity;
}

/* Chart fullscreen mode (Shift+F): slide surrounding panels away and let chart fill screen. */
body.t2g-fullscreen-chart {
  overflow: hidden;
}

body.t2g-fullscreen-chart .app-grid {
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* In fullscreen, the bottom panel becomes a fixed overlay; don't reserve layout space for the container. */
body.t2g-fullscreen-chart .t2g-bottom-panel {
  padding: 0;
}

/* Pin panels during transition so they don't affect chart layout */
body.t2g-fs-entering .sidebar-left,
body.t2g-fullscreen-chart .sidebar-left,
body.t2g-fs-exiting .sidebar-left {
  position: fixed;
  top: calc(var(--t2g-header-h) + var(--t2g-layout-gap));
  left: var(--t2g-layout-gap);
  width: 240px;
  max-height: calc(100vh - var(--t2g-header-h) - (var(--t2g-layout-gap) * 2));
  overflow: auto;
  z-index: 1200;
}

body.t2g-fs-entering .sidebar-right,
body.t2g-fullscreen-chart .sidebar-right,
body.t2g-fs-exiting .sidebar-right {
  position: fixed;
  top: calc(var(--t2g-header-h) + var(--t2g-layout-gap));
  right: var(--t2g-layout-gap);
  width: 320px;
  max-height: calc(100vh - var(--t2g-header-h) - (var(--t2g-layout-gap) * 2));
  overflow: auto;
  z-index: 1200;
}

body.t2g-fs-entering .positions-orders-panel,
body.t2g-fullscreen-chart .positions-orders-panel,
body.t2g-fs-exiting .positions-orders-panel {
  position: fixed;
  /* Keep the overlay panel from sitting under the main nav rail. */
  left: calc(var(--t2g-layout-gap) + var(--t2g-main-nav-width));
  right: var(--t2g-edge-gap);
  bottom: var(--t2g-edge-gap);
  z-index: 1100;
}

/* Slide out when fullscreen is active */
body.t2g-fullscreen-chart .sidebar-left {
  transform: translateX(-115%);
  opacity: 0;
  pointer-events: none;
}

body.t2g-fullscreen-chart .sidebar-right {
  transform: translateX(115%);
  opacity: 0;
  pointer-events: none;
}

body.t2g-fullscreen-chart .positions-orders-panel {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* Fullscreen bottom overlay: slide Positions/Orders/Trades up over the chart */
body.t2g-fullscreen-chart.t2g-fs-bottom-overlay-open .positions-orders-panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Bottom-center hover handle (fullscreen only) */
.t2g-fs-bottom-overlay-handle {
  display: none;
}

body.t2g-fullscreen-chart .t2g-fs-bottom-overlay-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 56px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  z-index: 1305;
  opacity: 0.65;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}

body.t2g-fullscreen-chart .t2g-fs-bottom-overlay-handle:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
}

body.t2g-fullscreen-chart.t2g-fs-bottom-overlay-open .t2g-fs-bottom-overlay-handle {
  opacity: 0.25;
}

/* Collapse toggle that rides with the overlay panel (only when opened via hover handle) */
.t2g-fs-bottom-overlay-collapse {
  display: none;
}

body.t2g-fullscreen-chart.t2g-fs-bottom-overlay-open.t2g-fs-bottom-overlay-open--hover .positions-orders-panel .t2g-fs-bottom-overlay-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 56px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  z-index: 1;
  opacity: 0.9;
  transition: opacity 160ms ease, background 160ms ease;
}

body.t2g-fullscreen-chart.t2g-fs-bottom-overlay-open.t2g-fs-bottom-overlay-open--hover .positions-orders-panel .t2g-fs-bottom-overlay-collapse:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.62);
}

body.t2g-fullscreen-chart.t2g-fs-bottom-overlay-open.t2g-fs-bottom-overlay-open--hover .positions-orders-panel .t2g-fs-bottom-overlay-collapse:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

:root[data-theme="light"] body.t2g-fullscreen-chart.t2g-fs-bottom-overlay-open.t2g-fs-bottom-overlay-open--hover .positions-orders-panel .t2g-fs-bottom-overlay-collapse {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(0, 0, 0, 0.70);
}

:root[data-theme="light"] body.t2g-fullscreen-chart .t2g-fs-bottom-overlay-handle {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.55);
  color: rgba(0, 0, 0, 0.72);
}

/* The normal resizer sits in the layout flow; hide it in fullscreen (panel becomes an overlay). */
body.t2g-fullscreen-chart .t2g-po-resizer {
  display: none;
}

/* Keep the right-side titlebar controls visible in fullscreen */
body.t2g-fullscreen-chart .chart-titlebar {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

body.t2g-fullscreen-chart .chart-titlebar .t2g-titlebar-right {
  display: inline-flex !important;
  align-items: center;
  margin-left: auto;
}

body.t2g-fullscreen-chart .chart-panel {
  max-height: none;
  border-radius: 0;
}

body.t2g-fullscreen-chart .chart-container {
  max-height: none;
  height: 100%;
}

body.t2g-fullscreen-chart .t2g-drawing-tools {
  /* In fullscreen keep it docked near the bottom to avoid the symbol pill. */
  top: auto;
  bottom: 12px;
}

.sidebar-left, .grid-center, .sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* Charting view: allow the chart to naturally stretch/shrink with the resizer. */
#t2g-view-charting .chart-panel,
#t2g-view-charting .chart-container {
  max-height: none;
}

.sidebar-right {
  max-height: 100%;
  overflow-y: auto;
}

.panel {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.panel-title {
  /* padding: 10px 12px; */
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--panel-border);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Reduce left sidebar base font-size so panel titles/content appear less large */
.sidebar-left {
  font-size: 12px;
}

/* Positions / Orders combined tab styles */
.positions-orders-tabs {
  display: inline-flex;
  gap: 8px;
}


/* Bottom panel resizer (between chart and Positions/Orders/Trades) */
.t2g-po-resizer {
  height: 8px;
  margin: -6px 0;
  cursor: ns-resize;
  border-radius: 8px;
  position: relative;
  flex: 0 0 auto;
  outline: none;
}

.t2g-po-resizer::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}

:root[data-theme="light"] .t2g-po-resizer::before {
  background: rgba(0, 0, 0, 0.10);
}

.t2g-po-resizer:hover::before,
body.t2g-po-resizing .t2g-po-resizer::before {
  background: rgba(255, 255, 255, 0.18);
}

:root[data-theme="light"] .t2g-po-resizer:hover::before,
:root[data-theme="light"] body.t2g-po-resizing .t2g-po-resizer::before {
  background: rgba(0, 0, 0, 0.18);
}

.t2g-po-resizer:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14);
}

/* Positions/Orders panel is now resizable */
.positions-orders-panel {
  height: var(--po-panel-h, 260px);
  flex: 0 0 var(--po-panel-h, 260px);
  min-height: var(--po-collapsed-h, 44px);
  transition:
    transform var(--t2g-fs-dur) var(--t2g-fs-ease),
    opacity var(--t2g-fs-dur) var(--t2g-fs-ease),
    height 180ms ease,
    flex-basis 180ms ease;
}

.positions-orders-panel .panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
}

.t2g-po-pin-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-text);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}

.t2g-po-pin-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--app-text);
}

:root[data-theme="light"] .t2g-po-pin-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.10);
}

.positions-orders-panel.is-pinned .t2g-po-pin-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--app-text);
}

:root[data-theme="light"] .positions-orders-panel.is-pinned .t2g-po-pin-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

.t2g-po-pin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14);
}

.positions-orders-panel.is-collapsed {
  height: var(--po-collapsed-h, 44px);
  flex-basis: var(--po-collapsed-h, 44px);
}

.positions-orders-panel.is-collapsed .panel-body {
  display: none;
}
.po-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted-text);
  padding: 6px 8px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.po-tab.is-active {
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--app-text);
}
.tab-badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--app-text);
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--t2g-weight-numeric);
  border: 1px solid var(--panel-border);
}
.positions-orders-body > #positions-container,
.positions-orders-body > #orders-container {
  min-height: 120px;
}

.positions-orders-panel {
  display: flex;
  flex-direction: column;
}
.positions-orders-panel .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px;
  box-sizing: border-box;
}
.positions-orders-body > #positions-container,
.positions-orders-body > #orders-container {
  height: 100%;
  overflow: auto;
}

/* Ensure chart-panel does not shrink when the bottom panel is toggled */
.chart-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.panel-body {
  padding: 10px 12px;
  flex: 1;
  overflow-y: auto;
}

.chart-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: var(--chart-max-height);
}

/* Legacy show-mode override removed (resizer replaces it). */

.chart-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  position: relative;
  max-height: var(--chart-max-height);
  background: var(--chart-bg);
}

/* Canvas video recording: red border while recording */
.chart-container.t2g-is-recording {
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.95) inset;
}

.t2g-recording-hud {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(10, 10, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  pointer-events: auto;
}

.t2g-recording-hud[hidden] {
  display: none !important;
}

.t2g-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 59, 48, 0.95);
  box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.16);
  animation: t2g-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes t2g-rec-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

.t2g-recording-label {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.t2g-recording-runtime {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
}

.t2g-recording-runtime-max {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.t2g-recording-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn.btn--sm {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}

.btn.btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.t2g-recording-countdown {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

.t2g-recording-countdown[hidden] {
  display: none !important;
}

.t2g-recording-countdown__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(10, 10, 12, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  min-width: 220px;
}

.t2g-recording-countdown__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
}

.t2g-recording-countdown__value {
  font-size: 56px;
  line-height: 1;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.96);
  font-variant-numeric: tabular-nums;
}

.t2g-recording-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.t2g-recording-setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.t2g-recording-setting__label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.t2g-recording-settings-toggles {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 720px) {
  .t2g-recording-settings-grid {
    grid-template-columns: 1fr;
  }
}

.t2g-chart-views {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 8px;
}

/* Normal charting (non-fullscreen): do not resize the chart for the bottom
   Positions/Trade History panel. The panel is a separate sticky/overlay element
   and should not create internal padding/gaps inside the chart frame. */
body.t2g-tab-charting:not(.t2g-fullscreen-chart) .t2g-chart-views {
  inset: 0;
}

.t2g-chart-views[data-t2g-chart-layout="single"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.t2g-chart-views[data-t2g-chart-layout="split-vertical"] {
  grid-template-columns: minmax(0, var(--t2g-split-left, 1fr)) minmax(0, var(--t2g-split-right, 1fr));
  grid-template-rows: 1fr;
}

.t2g-chart-views[data-t2g-chart-layout="split-horizontal"] {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, var(--t2g-split-top, 1fr)) minmax(0, var(--t2g-split-bottom, 1fr));
}

/* Focus/maximize mode: collapse split grid so the active pane fills the canvas */
.t2g-chart-views[data-t2g-chart-max="1"],
.t2g-chart-views[data-t2g-chart-max="2"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.t2g-chart-splitter {
  position: absolute;
  z-index: 20;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.t2g-chart-splitter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--overlay-border);
}

.t2g-chart-splitter[data-t2g-orient="v"] {
  top: 0;
  bottom: 0;
  width: 16px;
  cursor: col-resize;
}

.t2g-chart-splitter[data-t2g-orient="v"]::before {
  width: 2px;
  height: 100%;
  border-radius: 2px;
}

.t2g-chart-splitter[data-t2g-orient="h"] {
  left: 0;
  right: 0;
  height: 16px;
  cursor: row-resize;
}

.t2g-chart-splitter[data-t2g-orient="h"]::before {
  height: 2px;
  width: 100%;
  border-radius: 2px;
}

.t2g-chart-view {
  position: relative;
  min-width: 0;
  min-height: 0;
  /* Allow labels/overlays (e.g., H-Line axis labels) to extend without being clipped. */
  overflow: visible;
}

/* Mobile: allow custom pan/zoom gestures on the canvas without the browser
   interpreting them as page scroll/zoom while over the chart. */
.t2g-chart-view canvas,
.t2g-drawing-canvas {
  touch-action: none;
}

.t2g-chart-view.is-active {
  outline: none;
  border-radius: 4px;
}

/* Use an internal pseudo-element for the glow so it is clipped to the
   chart view boundaries (no overflow outside canvas). Different layouts
   use directional inset shadows so the glow appears on the inner split
   border only. */
.t2g-chart-view.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Single/full view: soft full inset glow */
.t2g-chart-views[data-t2g-chart-layout="single"] .t2g-chart-view.is-active::after {
  box-shadow: inset 0 0 28px 8px var(--overlay-border);
}

/* Split vertical: left pane (view 1) glow on right inner edge only */
.t2g-chart-views[data-t2g-chart-layout="split-vertical"] .t2g-chart-view[data-t2g-chart-view="1"].is-active::after {
  box-shadow: inset -24px 0 36px -12px var(--overlay-border);
}

/* Split vertical: right pane (view 2) glow on left inner edge only */
.t2g-chart-views[data-t2g-chart-layout="split-vertical"] .t2g-chart-view[data-t2g-chart-view="2"].is-active::after {
  box-shadow: inset 24px 0 36px -12px var(--overlay-border);
}

/* Split horizontal: top pane (view 1) glow on bottom inner edge only */
.t2g-chart-views[data-t2g-chart-layout="split-horizontal"] .t2g-chart-view[data-t2g-chart-view="1"].is-active::after {
  box-shadow: inset 0 -24px 36px -12px var(--overlay-border);
}

/* Split horizontal: bottom pane (view 2) glow on top inner edge only */
.t2g-chart-views[data-t2g-chart-layout="split-horizontal"] .t2g-chart-view[data-t2g-chart-view="2"].is-active::after {
  box-shadow: inset 0 24px 36px -12px var(--overlay-border);
}

/* When the canvas or chart view receives keyboard focus (force :focus-visible),
   remove the default/white outline so it doesn't show as a harsh line.
   Keep the parent `.t2g-chart-view.is-active` glow as the visual focus indicator. */
.t2g-chart-view:focus,
.t2g-chart-view:focus-visible,
.t2g-chart-view canvas:focus,
.t2g-chart-view canvas:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.t2g-chart-host {
  position: absolute;
  inset: 0;
}

.t2g-chart-symbol {
  position: absolute;
  /* Must sit above chart surfaces; header stays above everything (z-index: 1500). */
  z-index: 1200;
  top: 8px;
  left: 12px;
  transition: top 200ms ease, bottom 200ms ease, left 200ms ease, right 200ms ease;
  min-height: 32px; /* allow the pill to grow for taller controls */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px; /* vertical padding so inner selects fit */
  border-radius: 6px;
  background: var(--t2g-symbol-pill-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--t2g-symbol-pill-border);
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25px;
  /* Keep chart cursor "in charge" when hovering the symbol pill (BTCUSD label).
     Only the dropdown controls should capture pointer events. */
  cursor: inherit;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* Disable pointer hit-testing for non-interactive pill contents.
   Re-enable only for the glass select controls (symbol + timeframe). */
.t2g-chart-symbol * {
  pointer-events: none;
}

.t2g-chart-symbol .t2g-glass-select,
.t2g-chart-symbol .t2g-glass-select * {
  pointer-events: auto;
}

.t2g-hidden-control {
  display: none !important;
}

.t2g-chart-symbol select.t2g-chart-symbol__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.35px;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
}

/* Ensure selects inside the symbol pill fit visually and don't overflow */
.t2g-chart-symbol select.t2g-chart-symbol__select {
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
}

.t2g-chart-symbol select.t2g-chart-symbol__select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.t2g-chart-symbol--disabled {
  cursor: default;
}

.t2g-chart-symbol select.t2g-chart-symbol__select--tf {
  font-weight: 700;
  color: var(--muted-text);
  letter-spacing: 0.2px;
}

/* Glass Select (Selectize-like dropdown) */
.t2g-glass-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  border-radius: 6px;
  -webkit-user-select: none;
  user-select: none;
}

.t2g-glass-select.is-placeholder .t2g-glass-select__label {
  color: var(--muted-text);
  font-weight: 700;
}

.t2g-glass-select__trigger {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.35px;
  cursor: pointer;
  line-height: 26px;
}

.t2g-glass-select__trigger:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.t2g-glass-select__trigger:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.t2g-glass-select.is-disabled .t2g-glass-select__trigger {
  opacity: 0.55;
  cursor: not-allowed;
}

.t2g-glass-select__caret {
  font-size: 11px;
  opacity: 0.7;
  transform: translateY(-1px);
}

.t2g-glass-select.is-open .t2g-glass-select__caret {
  transform: translateY(-1px) rotate(180deg);
}

.t2g-glass-select__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  max-width: min(360px, 72vw);
  z-index: 60;

  background: var(--toast-bg);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--toast-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), 0 1px 0 1px rgba(255,255,255,0.03) inset;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  max-height: 0;
  transition: opacity 140ms ease, transform 140ms ease, max-height 160ms ease;
}

.t2g-glass-select.is-flip .t2g-glass-select__menu {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(8px);
}

.t2g-glass-select.is-open .t2g-glass-select__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: min(420px, 60vh);
}

.t2g-glass-select__search-wrap {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--toast-border);
}

.t2g-glass-select__search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--app-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  outline: none;
}

.t2g-glass-select__search:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.t2g-glass-select__items {
  max-height: min(360px, 52vh);
  overflow: auto;
  padding: 6px;
}

.t2g-glass-select__item {
  width: 100%;
  text-align: left;
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.25px;
  cursor: pointer;
}

.t2g-glass-select__item:hover,
.t2g-glass-select__item.is-active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.10);
}

.t2g-glass-select__item.is-selected {
  background: rgba(var(--t2g-accent-green-rgb), 0.14);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.25);
}

.t2g-glass-select__empty {
  padding: 10px 10px 12px;
  color: var(--muted-text);
  font-size: 13px;
}

.t2g-glass-select--tf .t2g-glass-select__trigger {
  font-weight: 700;
  color: var(--muted-text);
  letter-spacing: 0.2px;
}

/* Form variant: match .form-input sizing/visuals */
.t2g-glass-select--form {
  height: auto;
}

.t2g-glass-select--form .t2g-glass-select__trigger {
  height: auto;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.t2g-glass-select--form .t2g-glass-select__trigger:hover {
  background: var(--btn-hover-bg);
}

/* Dashboard: Active account switcher (only accent on hover) */
.t2g-account-switcher .t2g-glass-select--form .t2g-glass-select__trigger:hover {
  border-color: rgba(var(--t2g-accent-green-rgb), 0.55);
  background: rgba(var(--t2g-accent-green-rgb), 0.14);
}

/* Dashboard: Active account dropdown panel should have a visible blur */
.t2g-account-switcher .t2g-glass-select__menu {
  background: rgba(0, 0, 0, 0.52);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.t2g-chart-symbol__btn {
  border: 1px solid var(--t2g-symbol-pill-border);
  background: transparent;
  color: var(--muted-text);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.25px;
  height: 28px;
  line-height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
}

.t2g-chart-symbol__btn:hover {
  color: var(--app-text);
}

/* Glow the symbol pill when its canvas/view is selected */
.t2g-chart-view.is-active .t2g-chart-symbol {
  box-shadow:
    0 0 0 1px var(--t2g-symbol-pill-border),
    0 0 0 2px var(--overlay-border);
}

.t2g-chart-symbol__sym {
  font-weight: 800;
  letter-spacing: 0.35px;
}

.t2g-chart-symbol__divider {
  opacity: 0.65;
  font-weight: 700;
}

.t2g-chart-symbol__spread {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  /* Keep only the inner bid/ask pill visuals (accent). */
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.t2g-chart-symbol__spread-side {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--chip-border);
  color: var(--app-text); /* light in dark theme, dark in light theme */
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.15px;
}

.t2g-chart-symbol__spread-side--bid {
  border-color: var(--t2g-accent-green-60);
  background: rgba(var(--t2g-accent-green-rgb), 0.10);
}

.t2g-chart-symbol__spread-side--ask {
  border-color: var(--t2g-accent-red-60);
  background: rgba(var(--t2g-accent-red-rgb), 0.10);
}

.t2g-chart-symbol__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--app-text);
}

.t2g-chart-symbol__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--overlay-border);
  box-shadow: 0 0 0 1px var(--overlay-border);
}

.t2g-chart-symbol__status-text {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.t2g-chart-symbol__tf {
  font-weight: 700;
  color: var(--muted-text);
  letter-spacing: 0.2px;
}

/* Symbol overlay positioning based on time scale position */
.t2g-chart-symbol[data-time-scale="top"] {
  top: auto;
  bottom: 8px;
}

/* Symbol overlay positioning based on price scale position */
.t2g-chart-symbol[data-price-scale="left"] {
  left: auto;
  right: 12px;
}

.t2g-chart-clock {
  position: absolute;
  /* Must sit above the chart library's price/time scale surfaces */
  z-index: 1000;
  bottom: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25px;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
}

body.t2g-tab-charting:not(.t2g-fullscreen-chart) .t2g-chart-clock {
  bottom: var(--t2g-po-safe-bottom-h, 54px);
}

.t2g-chart-clock__menu {
  position: absolute;
  right: 0;
  bottom: 28px;
  min-width: 160px;
  max-height: 260px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 8px;
  background: var(--menu-bg);
  border: 1px solid var(--btn-border);
  pointer-events: auto;
}

.t2g-chart-clock__menu-item {
  background: transparent;
  color: var(--app-text);
  border: 0;
  text-align: left;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
}

.t2g-chart-clock__menu-item:hover {
  background: var(--btn-hover-bg);
}

.t2g-chart-clock__menu-item.is-active {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
}

/* Bottom-right chart corner control slot (uses the right-scale dead space). */
.t2g-chart-corner-controls {
  position: absolute;
  z-index: 7;
  bottom: 0;
  right: 0;
  width: var(--t2g-right-scale-w, 70px);
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  gap: 4px;
  pointer-events: none;
}

body.t2g-tab-charting:not(.t2g-fullscreen-chart) .t2g-chart-corner-controls {
  bottom: var(--t2g-po-safe-bottom-h, 54px);
}

.t2g-chart-corner-controls .t2g-entry-settings {
  pointer-events: auto;
}

/* Center the entry settings cog inside the right/bottom corner box */
.t2g-chart-corner-controls .t2g-entry-settings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#t2g-entry-settings-btn {
  padding: 4px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
}

/* Drawing tools toolbar */
.t2g-drawing-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--menu-bg);
  border-radius: 8px;
  border: 1px solid var(--menu-border);
  pointer-events: auto;
  position: absolute;
  top: auto;
  left: 12px;
  bottom: 12px;
  right: auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  z-index: 9;
  touch-action: none;
  transition: left 200ms ease, right 200ms ease;
}

/* Toolbox drag-reorder */
.t2g-toolbox-placeholder {
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

:root[data-theme="light"] .t2g-toolbox-placeholder {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(0, 0, 0, 0.06);
}

.t2g-toolbox-item--dragging {
  opacity: 0.92;
  transform: scale(1.03);
  border-radius: 10px;
  background: var(--toast-bg);
  border: 1px solid var(--toast-border);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 1px 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* Drawing tools positioning when price scale is on left */
.t2g-drawing-tools[data-price-scale="left"] {
  left: auto;
  right: 12px;
}

.t2g-pointer-tool {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.t2g-line-tool {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.t2g-indicators-tool {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.t2g-levels-tool {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.t2g-levels-btn {
  width: 100%;
}

.t2g-levels-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.t2g-indicators-btn {
  width: 100%;
}

.t2g-indicators-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.t2g-pointer-btn {
  width: 100%;
  justify-content: space-between;
  gap: 6px;
  padding: 0 6px;
}

.t2g-line-btn {
  width: 100%;
  justify-content: space-between;
  gap: 6px;
  padding: 0 6px;
}

.t2g-line-icon {
  display: none;
  align-items: center;
  justify-content: center;
}

.t2g-line-btn[data-line-mode="line"] .t2g-line-icon--line,
.t2g-line-btn[data-line-mode="hline"] .t2g-line-icon--hline,
.t2g-line-btn[data-line-mode="vline"] .t2g-line-icon--vline {
  display: flex;
}

.t2g-line-caret {
  font-size: 11px;
  opacity: 0.6;
}

.t2g-line-menu {
  position: absolute;
  top: 0;
  left: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: none;
  z-index: 12;
}

.t2g-drawing-tools[data-menu-direction="left"] .t2g-line-menu {
  left: auto;
  right: 40px;
  transform: translateX(6px);
}

.t2g-line-tool.is-open .t2g-line-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.t2g-pointer-icon {
  display: none;
  align-items: center;
  justify-content: center;
}

.t2g-pointer-btn[data-pointer-mode="arrow"] .t2g-pointer-icon--arrow,
.t2g-pointer-btn[data-pointer-mode="dot"] .t2g-pointer-icon--dot {
  display: flex;
}

.t2g-pointer-caret {
  font-size: 11px;
  opacity: 0.6;
}

.t2g-pointer-menu {
  position: absolute;
  top: 0;
  left: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  padding: 6px;
  min-width: 120px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: none;
  z-index: 12;
}

.t2g-drawing-tools[data-menu-direction="left"] .t2g-pointer-menu {
  left: auto;
  right: 40px;
  transform: translateX(6px);
}

.t2g-pointer-tool.is-open .t2g-pointer-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.t2g-indicators-menu {
  position: absolute;
  top: 0;
  left: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: none;
  z-index: 12;
}

.t2g-levels-menu {
  position: absolute;
  top: 0;
  left: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: none;
  z-index: 12;
}

.t2g-drawing-tools[data-menu-direction="left"] .t2g-indicators-menu {
  left: auto;
  right: 40px;
  transform: translateX(6px);
}

.t2g-drawing-tools[data-menu-direction="left"] .t2g-levels-menu {
  left: auto;
  right: 40px;
  transform: translateX(6px);
}

.t2g-indicators-tool.is-open .t2g-indicators-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.t2g-levels-tool.is-open .t2g-levels-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* When JS flips a popover to open on the left, make the initial slide-in come from the right. */
.t2g-pointer-menu[data-open-dir="left"],
.t2g-line-menu[data-open-dir="left"],
.t2g-indicators-menu[data-open-dir="left"],
.t2g-levels-menu[data-open-dir="left"] {
  transform: translateX(6px);
}

.t2g-levels-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--app-text);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 12px;
  text-align: left;
}

.t2g-levels-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.t2g-levels-option.is-active {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}

.t2g-indicators-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--app-text);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  text-align: left;
}

.t2g-indicators-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* RSI indicator: in-menu pane count stepper (0–3) */
.t2g-indicators-option.t2g-indicators-option--rsi {
  padding: 6px 8px;
}

.t2g-indicators-option--rsi .t2g-indicators-option__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.t2g-indicators-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.t2g-indicators-stepper__value {
  min-width: 14px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  opacity: 0.9;
}

.t2g-indicators-stepper__btn {
  width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--app-text);
  cursor: pointer;
  line-height: 1;
  font-weight: 900;
}

.t2g-indicators-stepper__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.t2g-pointer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--app-text);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  text-align: left;
}

.t2g-line-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--app-text);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  text-align: left;
}

.t2g-line-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.t2g-line-option.is-active {
  background: rgba(var(--t2g-accent-green-rgb), 0.16);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.4);
  color: var(--t2g-accent-green);
}

.t2g-line-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.t2g-pointer-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.t2g-pointer-option.is-active {
  background: rgba(var(--t2g-accent-green-rgb), 0.16);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.4);
  color: var(--t2g-accent-green);
}

.t2g-pointer-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.t2g-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.t2g-tool-btn:hover:not(:disabled) {
  background: var(--btn-hover-bg);
  color: var(--app-text);
  border-color: var(--btn-border);
}

.t2g-tool-btn.is-active {
  background: rgba(var(--t2g-accent-green-rgb), 0.2);
  color: var(--t2g-accent-green);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.4);
}

.t2g-pointer-option.is-active .t2g-pointer-option__icon,
.t2g-line-option.is-active .t2g-line-option__icon {
  color: inherit;
}

.t2g-pointer-btn[data-pointer-mode="dot"] .t2g-pointer-icon--dot,
.t2g-pointer-btn[data-pointer-mode="arrow"] .t2g-pointer-icon--arrow {
  color: var(--t2g-accent-green);
}

.t2g-pointer-caret,
.t2g-line-caret {
  color: var(--t2g-accent-green);
}

.t2g-tool-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.t2g-tool-delete {
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  color: rgba(var(--t2g-accent-red-rgb), 0.7);
}

.t2g-tool-delete:hover:not(:disabled) {
  color: var(--t2g-accent-red);
  background: rgba(var(--t2g-accent-red-rgb), 0.1);
}


.t2g-chart-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(27, 27, 27, 0.65);
  color: #e0e0e0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

.t2g-chart-loading.is-visible {
  display: flex;
}

.t2g-chart-loading__spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.75);
  animation: t2g-spin 900ms linear infinite;
}

.t2g-page-loading {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 18, 18, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.t2g-page-loading.is-visible {
  display: flex;
}

.t2g-page-loading__panel {
  width: min(520px, calc(100vw - 36px));
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(30, 30, 30, 0.68);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.92);
}

.t2g-page-loading__label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

@keyframes t2g-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.t2g-context-menu {
  position: fixed;
  z-index: 100000;
  min-width: 180px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 12px);
  overflow: auto;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.t2g-context-item {
  width: 100%;
  min-width: 0;
  text-align: left;
  background: transparent;
  color: var(--app-text);
  border: 0;
  border-radius: 8px;
  padding: 10px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t2g-context-item.t2g-context-item--icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.t2g-context-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.t2g-context-item.t2g-context-item--badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.t2g-context-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--panel-border);
  color: var(--app-text);
  font-size: 11px;
  font-weight: var(--t2g-weight-numeric, 600);
  font-family: var(--t2g-font-numeric, inherit);
  line-height: 1;
}

.t2g-context-item:hover {
  background: var(--btn-hover-bg);
}

.t2g-context-submenu {
  position: relative;
  padding: 0;
  background: transparent;
}

.t2g-context-submenu > span {
  display: block;
  width: 100%;
  padding: 10px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}

.t2g-context-submenu > span::after {
  content: '▾';
  float: right;
  font-size: 14px;
  line-height: 1;
}

.t2g-context-submenu:hover > span {
  background: var(--btn-hover-bg);
}

.t2g-context-submenu-items {
  display: none;
  position: relative;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  padding-left: 12px;
  box-shadow: none;
  margin-left: 0;
  margin-top: 4px;
}

.t2g-context-submenu:hover .t2g-context-submenu-items {
  display: block;
}

.t2g-replay-menu {
  position: fixed;
  z-index: 100000;
  width: max-content;
  max-width: calc(100vw - 12px);
  min-width: 520px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.t2g-replay-menu.is-playing {
  border-color: var(--t2g-accent-green-80);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--t2g-accent-green-40);
}

.t2g-replay-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-text);
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
}

.t2g-replay-menu__close {
  background: transparent;
  border: 0;
  color: var(--app-text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.t2g-replay-menu__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.t2g-replay-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--app-text);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.t2g-replay-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-replay-menu__speed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px 2px;
  font-size: 12px;
  color: var(--t2g-text-muted, var(--app-text));
}

.t2g-replay-menu__speed select {
  min-width: 88px;
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--app-text);
  border-radius: 8px;
  padding: 6px 8px;
}

.t2g-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.t2g-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.t2g-modal__panel {
  position: relative;
  width: auto;
  min-width: 300px;
  max-width: 720px;
  max-height: 72vh;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

/* Optional frosted glass modal surface (opt-in per modal). */
.t2g-modal__panel--glass {
  background: var(--toast-bg);
  border-color: var(--toast-border);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 18px 52px rgba(0,0,0,0.55), 0 1px 0 1px rgba(255,255,255,0.03) inset;
}

.t2g-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--panel-border);
}

.t2g-modal__header.is-grabbing {
  cursor: grabbing;
}

.t2g-modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--app-text);
}

.t2g-modal__close {
  background: transparent;
  border: 0;
  color: var(--app-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}

.t2g-modal__close:hover {
  background: var(--btn-hover-bg);
}

.t2g-modal__body {
  padding: 14px 16px 16px 16px;
  overflow: auto;
}

/* Capture modal (link/share mode) */
.t2g-capture-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 840px) {
  .t2g-capture-grid {
    grid-template-columns: 1fr;
  }
}

.t2g-capture-preview {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.22);
}

.t2g-capture-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 48vh;
  object-fit: contain;
  background: rgba(0,0,0,0.08);
}

.t2g-capture-actions__row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.t2g-capture-actions__label,
.t2g-capture-link__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--t2g-text-muted, var(--app-text));
  margin-top: 10px;
  margin-bottom: 6px;
}

.t2g-capture-link {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}

.t2g-capture-link__row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.t2g-capture-link__href {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--app-link, #6aa7ff);
  text-decoration: none;
}

.t2g-capture-link__href:hover {
  text-decoration: underline;
}

.t2g-capture-link__note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--t2g-text-muted, var(--app-text));
  opacity: 0.8;
}

.t2g-capture-share {
  margin-top: 14px;
}

.t2g-capture-share__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.t2g-share-btn {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--app-text);
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 44px;
  text-align: center;
}

.t2g-share-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-share-btn:focus-visible {
  outline: 2px solid rgba(120, 170, 255, 0.8);
  outline-offset: 2px;
}

/* Small tab bar (used in Object Edit modal for drawing Style/TimeFrames). */
.t2g-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t2g-tab {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--app-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.88;
}

.t2g-tab:hover {
  background: var(--btn-hover-bg);
  opacity: 1;
}

.t2g-tab.is-active {
  background: var(--btn-hover-bg);
  opacity: 1;
}

.t2g-tab-panels {
  width: 100%;
}

.t2g-tab-panel {
  display: none;
}

.t2g-tab-panel.is-active {
  display: block;
}

/* Info icon with hover/focus tooltip (used in object edit modal labels). */
.t2g-info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.t2g-info-icon:focus-visible {
  box-shadow: 0 0 0 2px rgba(141, 100, 255, 0.35);
}

.t2g-info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 9999;
  width: max-content;
  max-width: 280px;
  white-space: normal;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}

.t2g-info-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 9999;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.92);
}

/* Downward tooltip variant (prevents clipping when icon is near top of a scroll container). */
.t2g-info-icon--down::after {
  bottom: auto;
  top: calc(100% + 10px);
}

.t2g-info-icon--down::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 0.92);
}

.t2g-info-icon:hover::after,
.t2g-info-icon:hover::before,
.t2g-info-icon:focus::after,
.t2g-info-icon:focus::before {
  opacity: 1;
}

:root[data-theme="light"] .t2g-info-icon {
  border-color: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.70);
}

/* Slide-out drawer (used for chart objects list) */
.t2g-drawer {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: none;
  align-items: stretch;
  justify-content: flex-end;
}

/* Order Ticket: slide-in drawer inside the chart container (does not overlap left sidebar) */
.t2g-ticket-drawer {
  position: absolute;
  inset: 0;
  z-index: 75;
  display: none;
  align-items: stretch;
  justify-content: flex-start;
  pointer-events: none;
}

.t2g-ticket-drawer[hidden] {
  display: none !important;
}

.t2g-ticket-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: auto;
}

.t2g-ticket-drawer__panel {
  position: relative;
  width: 360px;
  max-width: 92vw;
  height: 100%;
  background: var(--menu-bg);
  border-right: 1px solid var(--menu-border);
  display: flex;
  flex-direction: column;
  box-shadow: 18px 0 44px rgba(0,0,0,0.55);
  transform: translateX(-105%);
  transition: transform 180ms ease;
  pointer-events: auto;
}

.t2g-ticket-drawer.is-open {
  pointer-events: auto;
}

.t2g-ticket-drawer.is-open .t2g-ticket-drawer__panel {
  transform: translateX(0);
}

.t2g-ticket-drawer.is-open .t2g-ticket-drawer__backdrop {
  opacity: 1;
}

.t2g-ticket-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--panel-border);
}

.t2g-ticket-drawer__title {
  color: var(--app-text);
  font-weight: 800;
  font-size: 16px;
}

.t2g-ticket-drawer__close {
  background: transparent;
  border: 0;
  color: var(--app-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}

.t2g-ticket-drawer__close:hover {
  background: var(--btn-hover-bg);
}

.t2g-ticket-drawer__body {
  padding: 12px 14px;
  overflow: auto;
}

.t2g-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.t2g-drawer__panel {
  position: relative;
  width: 340px;
  max-width: 92vw;
  height: 100%;
  background: var(--menu-bg);
  border-left: 1px solid var(--menu-border);
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 44px rgba(0,0,0,0.55);
}

.t2g-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--panel-border);
}

.t2g-drawer__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--app-text);
  font-weight: 800;
  font-size: 16px;
}

.t2g-drawer__subtitle {
  font-weight: 600;
  font-size: 12px;
  opacity: 0.75;
}

.t2g-drawer__close {
  background: transparent;
  border: 0;
  color: var(--app-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}

.t2g-drawer__close:hover {
  background: var(--btn-hover-bg);
}

.t2g-drawer__body {
  padding: 12px 14px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.t2g-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.t2g-drawer__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.78;
  color: var(--app-text);
}

.t2g-drawer__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.t2g-drawer__row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--app-text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Hide checkbox visuals but keep semantics/accessibility */
.t2g-drawer__row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.t2g-drawer__row.is-on {
  background: rgba(var(--t2g-accent-green-rgb), 0.18);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.55);
  color: var(--app-text);
  box-shadow: 0 0 0 1px rgba(var(--t2g-accent-green-rgb), 0.08) inset;
}

.t2g-drawer__row.is-off,
.t2g-drawer__row.is-disabled {
  background: rgba(var(--t2g-accent-red-rgb), 0.10);
  border-color: rgba(var(--t2g-accent-red-rgb), 0.40);
  color: var(--app-text);
  box-shadow: 0 0 0 1px rgba(var(--t2g-accent-red-rgb), 0.06) inset;
  opacity: 0.92;
}

.t2g-drawer__row:hover {
  background: var(--btn-hover-bg);
}

.t2g-drawer__row:focus-within {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.t2g-drawer__row-label {
  font-size: 12px;
  font-weight: 700;
}

.t2g-drawer__row-meta {
  font-size: 11px;
  opacity: 0.75;
  font-family: var(--t2g-font-numeric, inherit);
  font-weight: var(--t2g-weight-numeric, 600);
}

.t2g-drawer__empty {
  padding: 10px 10px;
  border: 1px dashed var(--panel-border);
  border-radius: 10px;
  opacity: 0.70;
  font-size: 12px;
}

/* Object Tree: grouped items (e.g. indicators with Line/Label toggles) */
.t2g-object-item {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
}

.t2g-object-item__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--app-text);
  opacity: 0.92;
  font-family: var(--t2g-font-numeric, inherit);
}

.t2g-object-item__title[draggable="true"] {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.t2g-object-item__title.is-dragging {
  cursor: grabbing;
}

.t2g-layer-title-left {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t2g-layer-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t2g-layer-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.t2g-layer-grip {
  width: 22px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--app-text);
  opacity: 0.65;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  font-weight: 900;
  letter-spacing: -2px;
}

.t2g-layer-grip.is-disabled {
  opacity: 0.25;
  cursor: default;
}

.t2g-layer-dnd-active .t2g-layer-grip {
  opacity: 0.85;
}

.t2g-layer-grip.is-dragging {
  opacity: 1;
  cursor: grabbing;
}

.t2g-layer-drop-target {
  outline: 2px solid rgba(158, 105, 255, 0.55);
  outline-offset: 3px;
  border-radius: 10px;
}

.t2g-layer-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--app-text);
  opacity: 0.92;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.t2g-layer-btn:hover {
  background: var(--btn-hover-bg);
}

.t2g-layer-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.t2g-object-item__toggles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.t2g-rsi-pane-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.t2g-rsi-pane-item {
  padding-top: 4px;
  padding-bottom: 4px;
  opacity: 0.92;
}

.t2g-rsi-pane-toggles {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid var(--panel-border);
  opacity: 0.92;
}

/* Chart settings: Canvas/Trading tabs */
.t2g-settings-tabs {
  display: flex;
  gap: 14px;
}

.t2g-settings-tabs__nav {
  flex: 0 0 160px;
  border-right: 1px solid var(--panel-border);
  padding-right: 12px;
}

.t2g-settings-tab-btn {
  width: 100%;
  display: block;
  text-align: left;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted-text);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 8px;
}

.t2g-settings-tab-btn:hover {
  background: var(--chip-bg);
}

.t2g-settings-tab-btn.is-active {
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--app-text);
}

.t2g-settings-tabs__content {
  flex: 1 1 auto;
  min-width: 420px;
}

.t2g-settings-tab-panel[hidden] {
  display: none;
}

/* Settings option cards (Account Settings / General) */
.t2g-settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.t2g-settings-card {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px 12px;
  color: var(--app-text);
  cursor: pointer;
}

.t2g-settings-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}

.t2g-settings-card:focus-visible {
  outline: 2px solid rgba(255,255,255,0.22);
  outline-offset: 2px;
}

.t2g-settings-card__title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}

.t2g-settings-card__subtitle {
  font-size: 12px;
  color: var(--muted-text);
  line-height: 1.35;
}

.t2g-modal__footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--panel-border);
}

.t2g-modal__section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

/* Recording mic test (level meter) */
.t2g-recording-mic-test__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.t2g-recording-mic-meter {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.t2g-recording-mic-meter__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(var(--t2g-accent-green-rgb), 0.85), rgba(255, 170, 0, 0.85), rgba(var(--t2g-accent-red-rgb), 0.85));
  transition: width 80ms linear;
}

/* Entry mode pills inside chart settings modal */
.t2g-entry-pill {
  background: rgba(255,255,255,0.04);
  color: #e0e0e0;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}
.t2g-entry-pill.is-active,
.t2g-entry-pill:active {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}

/* Modal placement: align pill row with candle color controls */
.t2g-entry-pill-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0 16px 6px;
}

.t2g-entry-pill:hover {
  background: rgba(255,255,255,0.08);
}

.t2g-entry-pill:focus-visible {
  outline: 2px solid rgba(255,255,255,0.16);
  outline-offset: 2px;
}

.t2g-candle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.t2g-candle-row:last-child {
  border-bottom: none;
}

/* Pill-style toggles for Chart Settings (signup/join step style) */
.t2g-modal .t2g-pill-toggle {
  position: relative;
  width: 100%;
}

.t2g-modal .t2g-pill-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.t2g-modal .t2g-pill-toggle__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #e0e0e0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.1;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.t2g-modal .t2g-pill-toggle__pill span:last-child {
  flex: 1;
}

.t2g-modal .t2g-pill-toggle__circle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.t2g-modal .t2g-pill-toggle__circle::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--t2g-accent-green-rgb), 0.95), rgba(var(--t2g-accent-green-rgb), 0.55));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms ease, transform 160ms ease;
  box-shadow: 0 0 8px rgba(var(--t2g-accent-green-rgb), 0.35);
}

.t2g-modal .t2g-pill-checkbox:focus-visible + .t2g-pill-toggle__pill {
  outline: none;
  border-color: rgba(var(--t2g-accent-green-rgb), 0.85);
  box-shadow: 0 0 0 2px rgba(var(--t2g-accent-green-rgb), 0.25);
}

.t2g-modal .t2g-pill-checkbox:checked + .t2g-pill-toggle__pill {
  border-color: rgba(var(--t2g-accent-green-rgb), 0.85);
  background: rgba(var(--t2g-accent-green-rgb), 0.16);
  color: #dff4ff;
}

.t2g-modal .t2g-pill-checkbox:checked + .t2g-pill-toggle__pill .t2g-pill-toggle__circle {
  border-color: rgba(var(--t2g-accent-green-rgb), 0.9);
  box-shadow: inset 0 0 0 3px rgba(var(--t2g-accent-green-rgb), 0.22);
}

.t2g-modal .t2g-pill-checkbox:checked + .t2g-pill-toggle__pill .t2g-pill-toggle__circle::after {
  opacity: 1;
  transform: scale(1);
}

.t2g-modal .t2g-pill-checkbox:disabled + .t2g-pill-toggle__pill {
  opacity: 0.55;
  cursor: not-allowed;
}

.t2g-modal .t2g-pill-checkbox:disabled + .t2g-pill-toggle__pill .t2g-pill-toggle__circle {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.t2g-modal .t2g-pill-checkbox:disabled + .t2g-pill-toggle__pill .t2g-pill-toggle__circle::after {
  opacity: 0;
  transform: scale(0.5);
}

:root[data-theme="light"] .t2g-modal .t2g-pill-toggle__pill {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a1a;
}

.t2g-candle-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #e0e0e0;
  -webkit-user-select: none;
  user-select: none;
}

.t2g-candle-colors {
  display: flex;
  gap: 10px;
}

.t2g-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--muted-text);
  font-size: 11px;
  font-weight: 700;
}

.t2g-alpha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t2g-alpha__value {
  min-width: 40px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

/* Remove number-input spinners for cleaner opacity fields */
.t2g-alpha__value[type="number"],
#t2g-color-palette input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.t2g-alpha__value[type="number"]::-webkit-outer-spin-button,
.t2g-alpha__value[type="number"]::-webkit-inner-spin-button,
#t2g-color-palette input[type="number"]::-webkit-outer-spin-button,
#t2g-color-palette input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.t2g-color-chip input[type="range"] {
  width: 92px;
  appearance: none;
  background: transparent;
}

.t2g-color-chip input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
}

.t2g-color-chip input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  margin-top: -3px;
}

.t2g-color-chip input[type="color"],
#t2g-chart-settings-modal input[type="color"],
#t2g-object-edit-modal input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  box-sizing: border-box;
}

/* Alpha / opacity numeric input next to color swatches */
.t2g-alpha__value {
  width: 56px;
  text-align: right;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.95);
  border-radius: 6px;
  padding: 4px 8px;
  box-sizing: border-box;
}

/* Small screens: ensure layout doesn't wrap awkwardly */
@media (max-width: 420px) {
  .t2g-alpha__value {
    width: 44px;
    padding: 3px 6px;
  }
}

/* Ensure the native color swatch respects the circular shape */
.t2g-color-chip input[type="color"]::-webkit-color-swatch-wrapper,
#t2g-chart-settings-modal input[type="color"]::-webkit-color-swatch-wrapper,
#t2g-object-edit-modal input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}
.t2g-color-chip input[type="color"]::-webkit-color-swatch,
#t2g-chart-settings-modal input[type="color"]::-webkit-color-swatch,
#t2g-object-edit-modal input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
.t2g-color-chip input[type="color"]::-moz-color-swatch,
#t2g-chart-settings-modal input[type="color"]::-moz-color-swatch,
#t2g-object-edit-modal input[type="color"]::-moz-color-swatch {
  border-radius: 50%;
}

/* Hover accent */
.t2g-color-chip input[type="color"]:hover,
#t2g-chart-settings-modal input[type="color"]:hover,
#t2g-object-edit-modal input[type="color"]:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.03);
}

.t2g-drawing-canvas {
  position: absolute;
  /*
    Drawings must be above the plot canvas but below/away from scales.
    Constrain the drawing canvas to the plot area by excluding:
    - the right price scale width
    - the bottom time scale height
  */
  top: 0;
  left: 0;
  right: var(--t2g-right-scale-w, 70px);
  bottom: var(--t2g-bottom-scale-h, 28px);
  z-index: 3;
  display: block;
  pointer-events: none;
}

.t2g-toolbar {
  position: absolute;
  left: 10px;
  top: 84px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(27, 27, 27, 1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.t2g-tool-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e0e0e0;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

.t2g-tool-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.t2g-line-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  z-index: 7;
  display: none;
  transform: translate(-50%, -50%);
  background: rgba(27, 27, 27, 1);
  border: 2px solid rgba(255, 255, 255, 0.75);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.t2g-line-handle:active {
  cursor: grabbing;
}

.entry-badge {
  position: absolute;
  z-index: 5;
  display: none;
  transform: translateY(-50%);
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  /* Glass effect: reduces visual noise when badges overlap */
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  background-clip: padding-box;
  background: rgba(27, 27, 27, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--t2g-font-numeric);
  /* Match scale marker weight for improved numeric readability */
  font-weight: var(--t2g-weight-numeric-strong);
  font-size: 12px;
  line-height: 16px;
}

.entry-badge.pending {
  opacity: 0.58;
  filter: saturate(0.95);
  /* Pending badges should look identical, but be non-interactive until confirmed. */
  pointer-events: none;
}

/* Parent badge tint removed: keep parent background unchanged. */

:root[data-theme="light"] .entry-badge,
:root[data-theme="light"] .order-line-badge {
  /* Light glass: keep overlaps bright/clean */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #0f0f0f;
}

.entry-badge-contracts {
  padding: 0 2px;
  font-weight: var(--t2g-weight-numeric-strong);
}

.entry-badge-contracts.long {
  color: var(--t2g-accent-green-text);
}

.entry-badge-contracts.short {
  color: var(--t2g-accent-red-text);
}

.entry-badge-ticks {
  font-weight: var(--t2g-weight-numeric);
}

.entry-badge-risk-preview {
  font-weight: var(--t2g-weight-numeric);
}

.entry-badge-risk-preview.pnl-positive {
  color: var(--t2g-accent-green-text);
}

.entry-badge-risk-preview.pnl-negative {
  color: var(--t2g-accent-red-text);
}

.entry-badge-risk-preview.pnl-flat {
  color: #b0b0b0;
}

:root[data-theme="light"] .entry-badge-risk-preview.pnl-flat {
  color: rgba(15, 15, 15, 0.55);
}

.entry-badge-ticks.pnl-positive {
  color: var(--t2g-accent-green-text);
}

.entry-badge-ticks.pnl-negative {
  color: var(--t2g-accent-red-text);
}

.entry-badge-ticks.pnl-flat {
  color: #b0b0b0;
}

:root[data-theme="light"] .entry-badge-ticks.pnl-flat {
  color: rgba(15, 15, 15, 0.55);
}

.entry-badge-close {
  background: transparent;
  border: none;
  padding: 0 4px;
  color: #b0b0b0;
  cursor: pointer;
  font-weight: 700;
}

:root[data-theme="light"] .entry-badge-close {
  color: rgba(15, 15, 15, 0.55);
}

.entry-badge-close:hover {
  color: #e0e0e0;
}

:root[data-theme="light"] .entry-badge-close:hover {
  color: #0f0f0f;
}

.entry-badge-risk {
  display: none;
  align-items: center;
  gap: 4px;
}

.entry-badge-risk-buttons {
  display: none;
  align-items: center;
  gap: 4px;
}

.entry-badge:hover .entry-badge-risk {
  display: flex;
}

.entry-badge:hover .entry-badge-risk-buttons {
  display: flex;
}

.entry-badge-risk-input {
  display: none;
  width: 56px;
  height: 16px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: inherit;
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric);
  font-size: 12px;
  line-height: 16px;
  outline: none;

  /* Remove browser numeric spinners (even if type changes back). */
  -moz-appearance: textfield;
  appearance: textfield;
}

.entry-badge-risk-input::-webkit-outer-spin-button,
.entry-badge-risk-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.entry-badge-risk-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.entry-badge-risk-item.active .entry-badge-risk-input {
  display: inline-block;
}

.entry-badge-risk-btn {
  height: 16px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: inherit;
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric);
  font-size: 12px;
  line-height: 16px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-badge-risk-btn.t2g-risk-hidden {
  display: none !important;
}

.entry-badge-risk-btn.risk-set.risk-positive {
  background: var(--t2g-accent-green-20);
  border-color: rgba(var(--t2g-accent-green-rgb), 0.35);
}

.entry-badge-risk-btn.risk-set.risk-negative {
  background: var(--t2g-accent-red-20);
  border-color: rgba(var(--t2g-accent-red-rgb), 0.35);
}

:root[data-theme="light"] .entry-badge-risk-input {
  border: 0;
  background: rgba(15, 15, 15, 0.10);
}

:root[data-theme="light"] .entry-badge-risk-btn {
  border: 0;
  background: rgba(15, 15, 15, 0.14);
}

:root[data-theme="light"] .entry-badge-risk-btn.risk-set.risk-positive {
  background: var(--t2g-accent-green-40);
  border: 1px solid rgba(var(--t2g-accent-green-rgb), 0.45);
}

:root[data-theme="light"] .entry-badge-risk-btn.risk-set.risk-negative {
  background: var(--t2g-accent-red-40);
  border: 1px solid rgba(var(--t2g-accent-red-rgb), 0.45);
}

.order-line-badge {
  position: absolute;
  z-index: 5;
  display: none;
  transform: translateY(-50%);
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  /* Glass effect: reduces visual noise when badges overlap */
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  background-clip: padding-box;
  background: rgba(27, 27, 27, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric-strong);
  font-size: 12px;
  line-height: 16px;
}

.last-price-badge {
  position: absolute;
  z-index: 60;
  display: none;
  transform: translateY(-50%);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--t2g-font-numeric);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--t2g-weight-numeric-strong);
  /* Glass effect: keeps labels readable when overlapping entries */
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-clip: padding-box;
}

:root[data-theme="light"] .last-price-badge {
  border: 0;
}

/* Indicator badge variant (e.g., Moving Average) */
.ma-badge {
  letter-spacing: 0.1px;
}

/* ========== Toasts ========== */
.toast-container {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: max-content;
  height: max-content;
  /* Must sit above the bottom Positions/History overlay (z-index ~1300). */
  z-index: 1600;
  pointer-events: none;
  overflow: visible;
}

.toast {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border-radius: 10px;
  /* Frosted glass background */
  background: var(--toast-bg);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--toast-border);
  color: var(--app-text);
  font-size: 13px;
  line-height: 16px;
  opacity: 0;
  transform: translate3d(var(--t2g-toast-dx, 0px), calc(6px + var(--t2g-toast-dy, 0px)), 0);
  transition: opacity 140ms ease, transform 140ms ease, box-shadow 160ms ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1px 0 1px rgba(255,255,255,0.02) inset;
}

.toast-in {
  opacity: 1;
  transform: translate3d(var(--t2g-toast-dx, 0px), var(--t2g-toast-dy, 0px), 0);
}

.toast-out {
  opacity: 0;
  transform: translate3d(var(--t2g-toast-dx, 0px), calc(6px + var(--t2g-toast-dy, 0px)), 0);
}

.toast-message {
  padding-right: 48px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.toast-count {
  position: absolute;
  top: 8px;
  right: 34px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  color: var(--app-text);
  background: var(--toast-bg);
  border: 1px solid var(--toast-border);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

.toast-close-all {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--toast-border);
  background: var(--toast-bg);
  color: var(--app-text);
  font-size: 18px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

.toast-close-all:hover {
  filter: brightness(1.08);
}

/* Modern, uniform scrollbar styling for the app
   - Provides a thin, rounded track and thumb across WebKit browsers and Firefox
   - Uses CSS variables so colors can be tuned easily
*/
:root {
  --t2g-scrollbar-bg: rgba(255,255,255,0.02);
  --t2g-scrollbar-thumb: rgba(255,255,255,0.08);
  --t2g-scrollbar-thumb-hover: rgba(255,255,255,0.14);
  --t2g-scrollbar-width: 10px;
  --t2g-scrollbar-radius: 10px;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--t2g-scrollbar-thumb) var(--t2g-scrollbar-bg);
}

/* WebKit (Chrome, Safari, Edge Chromium) */
*::-webkit-scrollbar {
  width: var(--t2g-scrollbar-width);
  height: var(--t2g-scrollbar-width);
}
*::-webkit-scrollbar-track {
  background: var(--t2g-scrollbar-bg);
  border-radius: var(--t2g-scrollbar-radius);
}
*::-webkit-scrollbar-thumb {
  background: var(--t2g-scrollbar-thumb);
  border-radius: var(--t2g-scrollbar-radius);
  border: 2px solid transparent; /* create padding effect */
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--t2g-scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Prefer autohiding scrollbar behavior on legacy MS browsers */
body, .panel-body, .positions-orders-body > #positions-container, .positions-orders-body > #orders-container, .positions-orders-body > #trades-container, .sidebar-right {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Ensure scrollable panels have matching appearance when clipped */
.panel-body, .positions-orders-body > #positions-container, .positions-orders-body > #orders-container, .positions-orders-body > #trades-container, .sidebar-right {
  scrollbar-gutter: stable both-edges;
}

.toast-success {
  border-color: rgba(var(--t2g-accent-green-rgb), 0.35);
  box-shadow: 0 8px 22px rgba(var(--t2g-accent-green-rgb), 0.06);
}

.toast-error {
  border-color: rgba(var(--t2g-accent-red-rgb), 0.35);
  box-shadow: 0 8px 22px rgba(var(--t2g-accent-red-rgb), 0.06);
}

.toast-info {
  border-color: var(--toast-border);
  box-shadow: 0 8px 18px var(--toast-glow);
}

/* Slight lift on visible state for a subtle glow */
.toast-in {
  box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 2px 0 1px rgba(255,255,255,0.01) inset;
}

/* ========== Watchlist ========== */
.watchlist {
  list-style: none;
  padding: 8px 0;
}

.watchlist li {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.watchlist li.watchlist-section {
  cursor: default;
  padding: 10px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted-text);
  border-radius: 0;
}

.watchlist li.watchlist-divider {
  cursor: default;
  padding: 0;
  margin: 6px 10px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 0;
}

.watchlist li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.watchlist li.watchlist-section:hover,
.watchlist li.watchlist-divider:hover {
  background: transparent;
}

.watchlist li.is-active {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ========== Order Ticket ========== */
#t2g-trading-panel[hidden] {
  display: none !important;
}

.order-ticket-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--muted-text);
}

.form-input {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}

select.form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  border-radius: 8px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.25 4.5 6 8.25 9.75 4.5' fill='none' stroke='rgba(255%2C255%2C255%2C0.65)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(to right, var(--select-divider), var(--select-divider));
  background-position:
    right 12px center,
    right 36px center;
  background-size:
    12px 12px,
    1px 18px;
  background-repeat: no-repeat;
}

.form-input:focus {
  outline: none;
  border-color: rgba(100, 200, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.btn {
  background: var(--btn-bg);
  color: var(--app-text);
  border: 1px solid var(--btn-border);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 600;
}

.btn:hover {
  background: var(--btn-hover-bg);
}

.btn.active {
  background: rgba(100, 200, 255, 0.4);
  border-color: rgba(100, 200, 255, 0.8);
}

/* Order ticket side buttons (custom opacity by side) */
.btn-side[data-side="BUY"] {
  background: var(--t2g-accent-green-20) !important;
  color: var(--t2g-on-accent-green);
  border: none;
}
.btn-side[data-side="BUY"]:hover {
  background: var(--t2g-accent-green-40) !important;
}
.btn-side[data-side="BUY"]:active,
.btn-side[data-side="BUY"].active {
  background: var(--t2g-accent-green-60) !important;
}

.btn-side[data-side="SELL"] {
  background: var(--t2g-accent-red-20) !important;
  color: var(--t2g-on-accent-red);
  border: none;
}
.btn-side[data-side="SELL"]:hover {
  background: var(--t2g-accent-red-40) !important;
}
.btn-side[data-side="SELL"]:active,
.btn-side[data-side="SELL"].active {
  background: var(--t2g-accent-red-60) !important;
}

.btn-danger {
  background: var(--t2g-accent-red-60);
  color: var(--t2g-on-accent-red);
  border: none;
}

.btn-danger:hover {
  background: var(--t2g-accent-red-80);
}

.btn-submit {
  background: var(--t2g-accent-green-40);
  border-color: var(--t2g-accent-green-80);
  margin-top: 4px;
  color: var(--t2g-on-accent-green);
}

.btn-submit:hover {
  background: var(--t2g-accent-green-60);
}

.btn-icon-only {
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.btn-icon-only svg {
  display: block;
}

.order-feedback {
  display: none;
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  margin-top: 4px;
  text-align: center;
}

.order-feedback-success {
  background: var(--t2g-accent-green-20);
  color: var(--t2g-accent-green);
  border: 1px solid var(--t2g-accent-green-40);
}

.order-feedback-error {
  background: var(--t2g-accent-red-20);
  color: var(--t2g-accent-red);
  border: 1px solid var(--t2g-accent-red-40);
}

/* ========== Position Card ========== */
.position-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

.position-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.position-symbol {
  font-weight: 600;
  letter-spacing: 0.3px;
}

.position-side {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.position-side.long {
  background: var(--t2g-accent-green-20);
  color: var(--t2g-accent-green);
}

.position-side.short {
  background: var(--t2g-accent-red-20);
  color: var(--t2g-accent-red);
}

.position-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  color: #b0b0b0;
}

.detail-row span:last-child {
  font-weight: var(--t2g-weight-numeric);
  color: #e0e0e0;
}

.pnl-positive {
  color: var(--t2g-accent-green);
}

.pnl-negative {
  color: var(--t2g-accent-red);
}

/* ========== Order Row ========== */
.order-row {
  display: grid;
  /* columns: price, symbol, side, qty, filled, fee, status */
  grid-template-columns: 55px 65px 45px 35px 65px 60px 65px;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 10px;
}

/* Trade History uses a different column set than Orders (more fields). */
.order-row.trade-header,
.order-row.trade-row {
  /* columns: price, symbol, entry, exit, duration, side, qty, filled, fees, spread, slippage, pnl, status */
  grid-template-columns: 55px 65px 78px 78px 66px 45px 35px 70px 60px 60px 70px 70px 65px;
}

.order-row.order-header {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  text-transform: uppercase;
}

/* In header rows, force all cells to inherit the header color (avoid per-cell grays). */
.order-row.order-header .order-id,
.order-row.order-header .order-symbol,
.order-row.order-header .order-entry-time,
.order-row.order-header .order-exit-time,
.order-row.order-header .order-duration,
.order-row.order-header .order-side,
.order-row.order-header .order-qty,
.order-row.order-header .order-filled,
.order-row.order-header .order-fee,
.order-row.order-header .order-spread,
.order-row.order-header .order-slippage,
.order-row.order-header .order-pnl,
.order-row.order-header .order-status {
  color: inherit;
}

:root[data-theme="light"] .order-row.order-header {
  color: rgba(15, 15, 15, 0.68);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.order-row.order-header .order-side,
.order-row.order-header .order-side.BUY,
.order-row.order-header .order-side.SELL {
  color: inherit;
}

.order-row.order-header .order-status {
  background: transparent;
  padding: 0;
  font-size: 9px;
}

.order-id {
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric);
  color: #888;
}

.order-symbol {
  font-weight: 600;
}

.order-side {
  font-weight: 700;
  text-transform: uppercase;
}

.order-side.BUY {
  color: var(--t2g-accent-green);
}

.order-side.SELL {
  color: var(--t2g-accent-red);
}

.order-status {
  text-transform: uppercase;
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
}

.order-fee {
  color: #bdbdbd;
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric);
  font-size: 11px;
}

.order-spread,
.order-slippage {
  color: #bdbdbd;
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric);
  font-size: 11px;
  text-align: right;
}

.order-filled {
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric);
  color: #b0b0b0;
}

.order-qty {
  text-align: right;
  font-weight: 600;
}

/* ========== KPI Grid ========== */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.kpi {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}

.kpi-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 14px;
  font-weight: var(--t2g-weight-numeric-strong);
  font-family: var(--t2g-font-numeric);
}

.kpi.pnl-positive .kpi-value {
  color: var(--t2g-accent-green);
}

.kpi.pnl-negative .kpi-value {
  color: var(--t2g-accent-red);
}

.empty {
  text-align: center;
  color: #666;
  font-size: 12px;
  padding: 12px 0;
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  .app-grid {
    grid-template-columns: 1fr;
  }

  .sidebar-right { order: 2; }
  .sidebar-left { order: 3; }

  .grid-center {
    order: 1;
  }

  .chart-container {
    min-height: 420px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }
}
/* Entry Info Box */
.entry-info-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Entry Info: title row + value row (right-aligned) */
.entry-info-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.entry-info-summary-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

.entry-info-summary-title {
  font-size: 10px;
  color: var(--muted-text);
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  min-width: 72px;
}

.entry-info-summary-values .entry-info-pill {
  min-width: 72px;
}

.entry-info-pill {
  font-family: var(--t2g-font-numeric);
  color: var(--app-text);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: right;
  white-space: nowrap;
}

.entry-info-pill.is-long {
  background: var(--t2g-accent-green);
  color: var(--t2g-on-accent-green);
}

.entry-info-pill.is-short {
  background: var(--t2g-accent-red);
  color: var(--t2g-on-accent-red);
}

.entry-info-pill.is-profit {
  background: var(--t2g-accent-green);
  color: var(--t2g-on-accent-green);
}

.entry-info-pill.is-loss {
  background: var(--t2g-accent-red);
  color: var(--t2g-on-accent-red);
}

:root[data-theme="light"] .entry-info-summary-title {
  color: #4d4d4d;
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.entry-symbol {
  font-weight: 600;
  font-size: 13px;
}

.entry-side {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.entry-side.long {
  background: var(--t2g-accent-green-20);
  color: var(--t2g-accent-green);
}

.entry-side.short {
  background: var(--t2g-accent-red-20);
  color: var(--t2g-accent-red);
}

.entry-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entry-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--muted-text);
}

.entry-row span:last-child {
  font-weight: 600;
  color: var(--app-text);
}

.entry-row.pnl-positive {
  color: var(--t2g-accent-green);
}

.entry-row.pnl-positive span:last-child {
  color: var(--t2g-accent-green);
}

.entry-row.pnl-negative {
  color: var(--t2g-accent-red);
}

.entry-row.pnl-negative span:last-child {
  color: var(--t2g-accent-red);
}

/* ========== Position Row (compact, single line) ========== */
.position-card {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.position-row {
  display: grid;
  /* Must match the Positions header/data cell count (12) to avoid wrapping into a second row. */
  grid-template-columns: 70px 86px 76px 56px 46px 78px 78px 60px 60px 70px 64px 32px;
  gap: 8px;
  align-items: center;
  padding: 0;
  border-bottom: none;
  font-size: 11px;
}

/* Ensure the row scrolls horizontally instead of collapsing columns too far. */
.position-row {
  min-width: 820px;
}

.position-row.position-table-header {
  padding: 6px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  text-transform: uppercase;
}

:root[data-theme="light"] .position-row.position-table-header {
  color: rgba(15, 15, 15, 0.68);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.position-row.position-table-header .position-side.long,
.position-row.position-table-header .position-side.short {
  color: inherit;
}
.position-row .position-symbol {
  font-family: var(--t2g-font-numeric);
  color: var(--app-text);
  font-weight: 700;
}
.position-row .position-side {
  font-weight: 700;
  text-transform: uppercase;
}
.position-row .position-side.long { color: var(--t2g-accent-green); }
.position-row .position-side.short { color: var(--t2g-accent-red); }
.position-row .position-fees,
.position-row .position-spread,
.position-row .position-slippage { text-align: right; font-family: var(--t2g-font-numeric); font-weight: var(--t2g-weight-numeric); }
.position-row .position-pnl { font-weight: 700; text-align: right; }
.position-row .position-actions { text-align: right; }

.position-costs {
  margin-top: 4px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

/* ========== News Panel ========== */
.t2g-news-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ========== Watchlist Tab ========== */
.t2g-watchlist-table {
  width: 100%;
  overflow-x: auto;
}

.t2g-watchlist-row {
  display: grid;
  grid-template-columns: 110px 110px 110px 110px 110px 120px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.t2g-watchlist-row--header {
  padding: 6px 0 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

:root[data-theme="light"] .t2g-watchlist-row--header {
  color: rgba(15, 15, 15, 0.68);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.t2g-watchlist-sym {
  font-family: var(--t2g-font-numeric);
  font-weight: 800;
}

.t2g-watchlist-num {
  text-align: right;
  font-family: var(--t2g-font-numeric);
  font-weight: var(--t2g-weight-numeric);
}

.t2g-news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.t2g-chip {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--muted-text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.t2g-chip:hover {
  color: var(--app-text);
}

.t2g-chip.is-active {
  color: var(--app-text);
  background: var(--badge-bg);
  border-color: var(--panel-border);
  box-shadow: 0 0 0 1px var(--panel-border) inset;
}

.t2g-news-meta {
  font-size: 12px;
  margin-bottom: 6px;
}

.t2g-news-status {
  font-size: 12px;
  margin-bottom: 10px;
}

.t2g-news-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.t2g-news-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}

.t2g-news-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.t2g-news-card__collapse {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--muted-text);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}

.t2g-news-card__collapse:hover {
  color: var(--app-text);
}

.t2g-news-card.is-collapsed .t2g-news-card__summary,
.t2g-news-card.is-collapsed .t2g-news-tags {
  display: none;
}

.t2g-news-card.is-collapsed {
  min-height: auto;
}

.t2g-calendar-status {
  font-size: 12px;
  margin-bottom: 8px;
}


.t2g-calendar-table {
  display: grid;
  gap: 6px;
}

.t2g-calendar-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(220px, 1.6fr) minmax(120px, 180px) minmax(90px, 120px);
  gap: 10px;
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}

.t2g-calendar-row--header {
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted-text);
}

.t2g-calendar-toggle-row {
  display: flex;
  justify-content: flex-start;
  padding: 4px 2px;
}

.t2g-calendar-toggle-btn {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--muted-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.t2g-calendar-toggle-btn:hover {
  color: var(--app-text);
}

.t2g-calendar-older.is-hidden {
  display: none;
}

.t2g-calendar-cell--title {
  font-weight: 700;
  color: var(--app-text);
}

.t2g-calendar-cell--source {
  color: var(--muted-text);
  font-size: 11px;
}

.t2g-calendar-cell--time {
  font-variant-numeric: tabular-nums;
  color: var(--muted-text);
  font-size: 11px;
}

.t2g-calendar-impact {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--badge-bg);
  color: var(--app-text);
  align-self: flex-start;
}

.t2g-calendar-impact--high {
  background: rgba(var(--t2g-accent-red-rgb), 0.18);
  border-color: var(--t2g-accent-red-40);
  color: var(--t2g-accent-red-text);
}

.t2g-calendar-impact--medium {
  background: rgba(255, 205, 102, 0.18);
  border-color: rgba(255, 205, 102, 0.4);
  color: var(--app-text);
}

.t2g-calendar-impact--low {
  background: rgba(var(--t2g-accent-green-rgb), 0.18);
  border-color: var(--t2g-accent-green-40);
  color: var(--t2g-accent-green-text);
}

.t2g-news-card__title {
  color: var(--app-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

.t2g-news-card__title:hover {
  text-decoration: underline;
}

.t2g-news-card__summary {
  color: var(--muted-text);
  font-size: 12px;
  line-height: 1.4;
}

.t2g-news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted-text);
}

.t2g-news-card__badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.t2g-news-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--badge-bg);
  color: var(--app-text);
}

.t2g-news-badge--alert {
  background: rgba(var(--t2g-accent-red-rgb), 0.18);
  border-color: var(--t2g-accent-red-40);
  color: var(--t2g-accent-red-text);
}

.t2g-news-badge--positive {
  background: rgba(var(--t2g-accent-green-rgb), 0.18);
  border-color: var(--t2g-accent-green-40);
  color: var(--t2g-accent-green-text);
}

.t2g-news-badge--negative {
  background: rgba(var(--t2g-accent-red-rgb), 0.18);
  border-color: var(--t2g-accent-red-40);
  color: var(--t2g-accent-red-text);
}

.t2g-news-badge--neutral {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--panel-border);
  color: var(--muted-text);
}

.t2g-news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.t2g-news-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--muted-text);
}