:root {
  --bg: #131722;
  --panel: #1e222d;
  --border: #2a2e39;
  --text: #d1d4dc;
  --muted: #787b86;
  --accent: #2962ff;
  --accent-hover: #1e4fe0;
  --danger: #f23645;
  --radius: 6px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.brand-logo {
  height: 34px;
  width: auto;
  border-radius: 6px;
}

.symbol-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 640px;
}

.source-dropdown {
  position: relative;
  flex-shrink: 0;
}

.source-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.source-button:hover {
  border-color: #3a3f4c;
  background: #191d28;
}

.source-button:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.source-button .chevron {
  color: var(--muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.source-dropdown.open .source-button {
  border-color: var(--accent);
}

.source-dropdown.open .chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.source-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 20;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.source-list.hidden {
  display: none;
}

.source-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

.source-list li:hover,
.source-list li.active {
  background: rgba(41, 98, 255, 0.15);
}

.source-list li.selected {
  color: var(--accent);
  font-weight: 600;
}

.source-list li .check {
  color: var(--accent);
  opacity: 0;
  font-size: 12px;
}

.source-list li.selected .check {
  opacity: 1;
}

.symbol-input-wrap {
  position: relative;
  flex: 1;
}

#symbol-input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
}

#symbol-input:focus {
  outline: none;
  border-color: var(--accent);
}

.suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.suggestions.hidden {
  display: none;
}

.suggestions li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.suggestions li:hover,
.suggestions li.active {
  background: rgba(41, 98, 255, 0.15);
}

.suggestions .sym {
  font-weight: 600;
  color: var(--text);
}

.suggestions .name {
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestions .meta {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.suggestions .empty {
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
  cursor: default;
}

button#load-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

button#load-btn:hover {
  background: var(--accent-hover);
}

.app-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-shell.hidden {
  display: none;
}

.account-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.account-name {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.auth-screen.hidden {
  display: none;
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.boot-screen.hidden {
  display: none;
}

.boot-screen .spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: chart-spin 0.7s linear infinite;
}

.auth-card {
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
}

.auth-card .brand {
  justify-content: center;
  margin-bottom: 20px;
  font-size: 20px;
}

.auth-card .brand-logo {
  height: 40px;
}

.auth-tabs {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.auth-tab.active {
  background: var(--accent);
  color: white;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.auth-form.hidden {
  display: none;
}

.auth-form input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 10px;
  font-size: 13px;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-hint {
  list-style: none;
  color: var(--muted);
  font-size: 11px;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auth-hint li {
  padding-left: 14px;
  position: relative;
}

.auth-hint li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
}

.auth-error {
  color: var(--danger);
  font-size: 12px;
  margin: 0;
}

.auth-error.hidden {
  display: none;
}

.auth-submit {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.auth-submit:hover {
  background: var(--accent-hover);
}

.workspace {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}

.workspace-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-rail {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
}

.side-rail-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.side-rail-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.side-rail-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.side-rail-btn.active {
  color: var(--accent);
  background: rgba(41, 98, 255, 0.15);
  border-color: var(--accent);
}

.side-rail-btn:disabled {
  color: var(--muted);
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.side-rail-left {
  border-left: none;
  border-right: 1px solid var(--border);
}

.watchlist-resize-handle {
  width: 5px;
  flex-shrink: 0;
  cursor: ew-resize;
  background: transparent;
}

.watchlist-resize-handle:hover,
.watchlist-resize-handle.active {
  background: var(--accent);
}

.watchlist-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  overflow: hidden;
  transition: width 0.15s ease, opacity 0.15s ease;
}

.watchlist-panel.collapsed {
  width: 0;
  opacity: 0;
  border-left: none;
}

/* One physical panel, swapped between tab contents (Watchlist / Objects /
   ...) by the rail buttons — each view still needs to be its own flex
   column so its item list can flex/scroll independently. */
.side-panel-view {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.panel-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.panel-view-header-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: normal;
}

.panel-view-header-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* A text-label header button ("Clear") reads too large next to its
   uppercase 10px subheader at the base 15px symbol-button size ("+", "⟳"). */
#clear-triggered-alerts-btn {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#drawing-tool-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.side-rail-divider {
  width: 26px;
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  flex-shrink: 0;
}

.drawing-color-swatch-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.drawing-style-popup {
  position: fixed;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.drawing-style-popup input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
}

.drawing-style-popup select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 6px;
  font-size: 12px;
  cursor: pointer;
}

.drawing-inline-text-input {
  position: fixed;
  z-index: 250;
  transform: translateY(-50%);
  background: rgba(19, 23, 34, 0.85);
  border: 1px dashed var(--accent);
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 160px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  outline: none;
}

.drawing-text-input {
  width: 130px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
}

.drawing-text-input:focus {
  outline: none;
  border-color: var(--accent);
}

.drawing-style-popup button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.drawing-style-popup button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.drawing-style-popup button.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(242, 54, 69, 0.1);
}

.chart-context-menu {
  position: fixed;
  z-index: 300;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.chart-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.chart-context-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.chart-context-menu button.danger:hover {
  color: var(--danger);
  background: rgba(242, 54, 69, 0.1);
}

.watchlist-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 10px 0;
  flex-shrink: 0;
}

.watchlist-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px 6px 5px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.watchlist-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.watchlist-tab-label {
  cursor: pointer;
}

.watchlist-tab-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.12s ease, background 0.12s ease;
}

.watchlist-tab-remove:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.watchlist-tab-add {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.watchlist-tab-add:hover {
  color: var(--text);
  border-color: #3a3f4c;
}

.watchlist-items {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.watchlist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.watchlist-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.watchlist-item-info {
  flex: 1;
  min-width: 0;
}

.watchlist-item-symbol {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.watchlist-item-name {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-item-quote {
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.watchlist-item-last {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.watchlist-item-chg {
  font-size: 11px;
  color: var(--muted);
}

.watchlist-item-chg.up {
  color: #26a69a;
}

.watchlist-item-chg.down {
  color: #ef5350;
}

.watchlist-item-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.watchlist-item-remove:hover {
  color: var(--danger);
  background: rgba(242, 54, 69, 0.1);
}

.watchlist-empty {
  padding: 16px 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Separates the "ALERTS" header bar from the first symbol group below it —
   scoped to this panel specifically (not the shared .panel-view-header
   itself, which every other side-panel tab also uses) since the ask was
   about the alerts list's own grouping, not a global header style change. */
#alerts-view .panel-view-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
  margin-bottom: 2px;
}

/* Active-alerts list only (see renderAlertsPanel) — the triggered log below
   it stays a plain chronological feed, not grouped, since "most recent
   first" is the point there. */
.alert-group-header {
  padding: 4px 8px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  /* Tinted with the app's own accent (the same blue an alert's marker/line
     is drawn in on the chart) instead of plain --muted gray — the panel
     otherwise reads as entirely grayscale. */
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.alert-group-header:first-child {
  margin-top: 4px;
  border-top: none;
}

/* Small colored dot before each row's condition text (see buildAlertRow) —
   same up/down palette as a watchlist's price-change figures, so "crosses
   above" vs "crosses below" reads at a glance; "crosses either" (no
   inherent direction) gets the neutral accent blue instead. */
.alert-direction-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.alert-direction-dot.up {
  background: #26a69a;
}

.alert-direction-dot.down {
  background: #ef5350;
}

.alert-direction-dot.either {
  background: var(--accent);
}

.econ-date-label {
  padding: 0 12px 8px;
  margin-top: -4px;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ---- On-chart event display controls (top of the Economic panel) ---- */
.econ-chart-controls {
  margin: 8px 12px 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.econ-chart-controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.econ-chart-controls-title {
  font-size: 12px;
  font-weight: 700;
}

/* Toggle switch */
.econ-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.econ-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.econ-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.15s ease;
}
.econ-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.econ-switch input:checked + .econ-switch-track {
  background: var(--accent);
}
.econ-switch input:checked + .econ-switch-track::after {
  transform: translateX(16px);
}

.econ-chart-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.econ-filters-note {
  margin: 0;
  font-size: 10px;
  color: var(--muted);
}

/* Label sits on its own line above its chip group — the chip groups wrap
   (currency can be ~10 chips), so an inline label would never align. */
.econ-filter-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.econ-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Currency label row: "CURRENCY" + a compact All switch. */
.econ-allcur-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.econ-allcur-head .econ-filter-label {
  margin-right: auto;
}
.econ-allcur-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
/* Compact switch variant for the All-currencies toggle. */
.econ-switch-sm {
  width: 30px;
  height: 16px;
}
.econ-switch-sm .econ-switch-track::after {
  width: 12px;
  height: 12px;
}
.econ-switch-sm input:checked + .econ-switch-track::after {
  transform: translateX(14px);
}

.econ-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

/* A pill with a leading status dot — the row reads as a line of coloured
   dots at a glance, no need to fill the whole chip. */
.econ-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.econ-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  flex-shrink: 0;
}
.econ-chip:hover {
  color: var(--text);
}
.econ-chip.on {
  color: var(--text);
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.04);
}
.econ-chip.on::before {
  opacity: 1;
}
/* Impact chips carry their own accent colour when on. */
.econ-chip-high.on {
  color: #f23645;
}
.econ-chip-medium.on {
  color: #ffa726;
}
.econ-chip-low.on {
  color: #e0b000;
}
#econ-currency-chips .econ-chip.on {
  color: var(--accent);
}
#econ-currency-chips:empty {
  display: none;
}

/* Hover tooltip for an on-chart economic-event marker. */
.econ-marker-tooltip {
  position: absolute;
  z-index: 7;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(20, 23, 31, 0.97);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
  transform: translate(-50%, -100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.econ-marker-tooltip .econ-marker-tooltip-head {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.econ-marker-tooltip .econ-marker-tooltip-more {
  color: var(--muted);
  margin-top: 3px;
}

.econ-events {
  margin-top: 0;
}

.econ-event {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 8px 8px 7px;
  border-radius: 5px;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.econ-event:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Left-edge accent so high-impact events are visible scanning down the
   list, not just on hover over the badge — same colors as the badge
   itself, just lower-key (a full-strength border reads too heavy for a
   whole row). */
.econ-event-high {
  border-left-color: var(--danger);
}

.econ-event-medium {
  border-left-color: #ffa726;
}

.econ-event-low {
  border-left-color: #ffca2880;
}

.econ-event-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.econ-event-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.econ-impact-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  color: #1a1a1a;
  background: var(--muted);
}

.econ-impact-badge.econ-impact-high {
  background: var(--danger);
  color: #fff;
}

.econ-impact-badge.econ-impact-medium {
  background: #ffa726;
}

.econ-impact-badge.econ-impact-low {
  background: #ffca28;
}

.econ-event-currency {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.econ-event-title {
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
}

.econ-event-stats {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Reuses .chart-context-menu's floating card (position/border/shadow) as a
   base — this just adds the richer content layout on top. */
.econ-event-popup {
  min-width: 220px;
  max-width: 280px;
  padding: 12px;
  gap: 8px;
  cursor: default;
}

.econ-event-popup-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.econ-event-popup-meta {
  display: flex;
  align-items: center;
  gap: 7px;
}

.econ-event-popup-when {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.econ-event-popup-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.econ-event-popup-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.econ-event-popup-row span:first-child {
  color: var(--muted);
}

.econ-event-popup-row span:last-child {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.econ-event-popup-link {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0 0;
}

.econ-event-popup-link:hover {
  text-decoration: underline;
}

/* Merged-pin popup: one clickable block per event at that time. */
.econ-event-list-popup {
  min-width: 240px;
  max-width: 300px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  gap: 4px;
}

.econ-event-list-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 2px 4px 6px;
}

.econ-event-list-popup .econ-event-list-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.econ-event-list-popup .econ-event-list-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.econ-event-list-popup .econ-event-list-row.econ-event-high {
  border-left-color: var(--danger);
}
.econ-event-list-popup .econ-event-list-row.econ-event-medium {
  border-left-color: #ffa726;
}
.econ-event-list-popup .econ-event-list-row.econ-event-low {
  border-left-color: #ffca2880;
}

.econ-event-list-row-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.econ-event-list-row-time {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.econ-event-list-row-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.econ-event-list-row-stats {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Modern thin scrollbar for the app's scrollable panels ---- */
.econ-event-list-popup,
.watchlist-items,
.indicator-picker-list,
.functions-log,
.indicator-settings-popup,
.suggestions {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.econ-event-list-popup::-webkit-scrollbar,
.watchlist-items::-webkit-scrollbar,
.indicator-picker-list::-webkit-scrollbar,
.functions-log::-webkit-scrollbar,
.indicator-settings-popup::-webkit-scrollbar,
.suggestions::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.econ-event-list-popup::-webkit-scrollbar-track,
.watchlist-items::-webkit-scrollbar-track,
.indicator-picker-list::-webkit-scrollbar-track,
.functions-log::-webkit-scrollbar-track,
.indicator-settings-popup::-webkit-scrollbar-track,
.suggestions::-webkit-scrollbar-track {
  background: transparent;
}
.econ-event-list-popup::-webkit-scrollbar-thumb,
.watchlist-items::-webkit-scrollbar-thumb,
.indicator-picker-list::-webkit-scrollbar-thumb,
.functions-log::-webkit-scrollbar-thumb,
.indicator-settings-popup::-webkit-scrollbar-thumb,
.suggestions::-webkit-scrollbar-thumb {
  /* 2px transparent border + background-clip keeps the visible thumb a slim
     pill floating in the track, rather than a full-width bar. */
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
.econ-event-list-popup::-webkit-scrollbar-thumb:hover,
.watchlist-items::-webkit-scrollbar-thumb:hover,
.indicator-picker-list::-webkit-scrollbar-thumb:hover,
.functions-log::-webkit-scrollbar-thumb:hover,
.indicator-settings-popup::-webkit-scrollbar-thumb:hover,
.suggestions::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.34);
  background-clip: content-box;
}
.econ-event-list-popup::-webkit-scrollbar-corner,
.watchlist-items::-webkit-scrollbar-corner,
.functions-log::-webkit-scrollbar-corner {
  background: transparent;
}

.econ-now-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: default;
}

.econ-now-line {
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

.econ-now-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.alert-item-triggered {
  opacity: 0.55;
}

.alert-unseen-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}

/* Alerts panel is split into two stacked sections, notification-widget
   style — active alerts (managed, grows to fill the panel) on top, a
   capped-height log of what's already fired below it. */
.alerts-active-list {
  flex: 1 1 auto;
}

.panel-view-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.alerts-log-resize-handle {
  height: 5px;
  flex-shrink: 0;
  cursor: row-resize;
  background: transparent;
}

.alerts-log-resize-handle:hover,
.alerts-log-resize-handle.active {
  background: var(--accent);
}

.alerts-log-list {
  flex: 0 0 auto;
  /* Overridden inline by JS on load/drag (see the resize handler) — this is
     just the pre-JS/no-saved-size fallback. */
  height: 240px;
  margin-top: 4px;
}

/* ---- Functions tab (Functions rail button → #functions-view) ---- */

.functions-list {
  flex: 1 1 auto;
}

.function-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.function-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.function-item.selected {
  background: rgba(41, 98, 255, 0.12);
}

.function-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.function-item-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.function-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
}
.function-status-dot.running {
  background: var(--accent);
  animation: function-pulse 1s ease-in-out infinite;
}
.function-status-dot.ok {
  background: #26a69a;
}
.function-status-dot.failed {
  background: #ef5350;
}
.function-status-dot.cancelled {
  background: #f5a623;
}

@keyframes function-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.function-run-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.function-run-btn:hover {
  filter: brightness(1.1);
}
.function-run-btn:disabled {
  background: rgba(255, 255, 255, 0.12);
  color: var(--muted);
  cursor: default;
  filter: none;
}
.function-run-btn.function-cancel-btn {
  background: #ef5350;
}

.function-item-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.functions-log {
  flex: 0 0 auto;
  /* Overridden inline by JS on load/drag — pre-JS / no-saved-size fallback. */
  height: 240px;
  margin: 4px 0 0;
  padding: 8px 12px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
}

.functions-log:empty::before {
  content: "No output yet — pick a function and press Run.";
  color: var(--muted);
}

.alert-create-popup {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 180px;
}

.alert-create-symbol {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.alert-create-popup input[type="number"] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
  width: 100%;
  min-width: 0;
  /* Plain typed number, no spinner — the up/down arrows are more fiddly
     than useful for a price field where you're either typing a value or
     clicking it off the chart. */
  -moz-appearance: textfield;
}

.alert-create-popup input[type="number"]::-webkit-outer-spin-button,
.alert-create-popup input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.alert-create-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.alert-create-price-row input[type="number"] {
  flex: 1;
}

.alert-create-pick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}

.alert-create-pick-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.toast-container {
  position: fixed;
  top: 92px;
  right: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}

.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: toast-in 0.15s ease;
}

.toast-error {
  border-left-color: var(--danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.layer-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.layer-item.selected {
  background: rgba(41, 98, 255, 0.15);
}

.indicator-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.indicator-item-toggle,
.indicator-item-settings,
.indicator-item-actions .watchlist-item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.indicator-item-toggle:hover,
.indicator-item-settings:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.indicator-item-actions .watchlist-item-remove:hover {
  color: var(--danger);
  background: rgba(242, 54, 69, 0.12);
}

.indicator-item.hidden-indicator .indicator-item-toggle {
  color: var(--muted);
  opacity: 0.5;
}

.indicator-item.hidden-indicator .watchlist-item-symbol,
.indicator-item.hidden-indicator .watchlist-item-name {
  opacity: 0.5;
}

/* .watchlist-item's own display:flex lays out a single row — overridden
   here to stack the label/actions row above the meta info section instead. */
.indicator-item {
  flex-direction: column;
  align-items: stretch;
}

.indicator-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.indicator-item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.indicator-item-meta.hidden {
  display: none;
}

.indicator-picker {
  position: absolute;
  z-index: 40;
  top: 34px;
  right: 10px;
  left: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  max-height: 220px;
  overflow-y: auto;
}

.indicator-picker-list {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.indicator-picker-list li {
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
}

.indicator-picker-list li:hover {
  background: rgba(255, 255, 255, 0.08);
}

.indicator-settings-popup {
  flex-direction: column;
  align-items: stretch;
  min-width: 190px;
}

.indicator-settings-popup .indicator-param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.indicator-settings-popup input[type="number"],
.indicator-settings-popup input[type="text"],
.indicator-settings-popup select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 12px;
  width: 90px;
}

.indicator-settings-popup input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.indicator-settings-popup .indicator-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}

.watchlist-star-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.watchlist-star-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.watchlist-star-btn.active {
  color: #f0b90b;
}

.watchlist-star-btn.active svg path {
  fill: currentColor;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.hidden {
  display: none !important;
}

.chart-view {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.chart-toolbar-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.chart-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.panel-symbol {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.live-indicator.live .live-dot {
  background: #26a69a;
  box-shadow: 0 0 0 rgba(38, 166, 154, 0.6);
  animation: live-pulse 1.6s infinite;
}

.live-indicator.live {
  color: #26a69a;
}

.live-indicator.offline .live-dot {
  background: var(--danger);
}

.live-indicator.offline {
  color: var(--danger);
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(38, 166, 154, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(38, 166, 154, 0);
  }
}

.panel-meta {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  background: rgba(41, 98, 255, 0.15);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-group {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}

.btn-group button {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-group button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.btn-group button.active {
  background: var(--accent);
  color: white;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
  color: var(--text);
  border-color: #3a3f4c;
  background: #191d28;
}

.chart-container {
  flex: 1;
  min-height: 0;
  position: relative;
  /* The price badge is a plain DOM overlay with no bounds of its own —
     unlike the canvas-rendered price scale, it can drift outside this box
     when the dragged price pushes its computed Y off the top/bottom edge.
     Clipping here keeps it (and the legend/loading overlay) confined to the
     chart area, matching how the native axis labels always behave. */
  overflow: hidden;
  /* No native touch scrolling anywhere in the chart — a finger drag goes
     straight to our pointerdown handlers (drawing move/resize, alert-line
     drag) or the chart library's own pan/pinch, with no ~300ms gesture
     disambiguation delay first. Harmless on desktop (mouse ignores it). */
  touch-action: none;
}
.chart-container * {
  touch-action: none;
}

.chart-legend {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  background: rgba(30, 34, 45, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.chart-legend.up .legend-value {
  color: #26a69a;
}

.chart-legend.down .legend-value {
  color: #ef5350;
}

.legend-item {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.legend-value {
  color: var(--text);
  font-weight: 600;
  margin-left: 2px;
}

.indicator-info-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
}

.indicator-info-row span:last-child {
  color: var(--text);
  font-weight: 600;
}

.indicator-info-section {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.indicator-info-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.indicator-legend-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.indicator-legend-row {
  position: absolute;
  /* Same box as the OHLC/volume badge (.chart-legend): left 12px + 1px
     border + 10px padding, so the label text lines up with it — and the
     border makes one enclosed pill around the label *and* the hover
     eye/gear/x buttons. */
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  white-space: nowrap;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  pointer-events: auto;
  cursor: pointer;
  /* Always-on backdrop, not just on hover -- a pane-kind indicator's own
     line/histogram data (e.g. MACD near the top of its pane) otherwise
     renders straight through the title text with no separation, which
     reads as the title being misplaced rather than what it actually is:
     legible text with nothing behind it. Same tone as the OHLC legend
     badge (.chart-legend) for a consistent on-chart-label look. */
  background: rgba(30, 34, 45, 0.75);
}

.indicator-legend-row:hover {
  background: rgba(30, 34, 45, 0.9);
  border-color: var(--muted);
}

.indicator-legend-row.hidden-indicator {
  opacity: 0.45;
}

.indicator-legend-actions {
  display: none;
  align-items: center;
  gap: 3px;
}

.indicator-legend-row:hover .indicator-legend-actions {
  display: flex;
}

.indicator-legend-actions button {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 1px;
  display: flex;
  align-items: center;
}

.indicator-legend-actions button:hover {
  color: var(--text);
}

/* Touch devices have no hover, so the eye/settings/remove controls would
   never appear. Show them permanently there and give each a real finger-
   sized hit area. */
@media (hover: none), (pointer: coarse) {
  .indicator-legend-row {
    padding: 3px 10px; /* taller for touch; keep left inset aligned with the OHLC badge */
    /* Critical on touch: the row spans a wide strip across the top of each
       pane. If it stayed pointer-events:auto (as it is for :hover on
       desktop) that whole strip would swallow taps meant for the chart
       underneath — panning, crosshair, selecting a drawing. Let the row and
       its label pass touches straight through; only the action buttons
       below opt back in. */
    pointer-events: none;
  }
  .indicator-legend-actions {
    display: flex;
    gap: 2px;
    pointer-events: none;
  }
  .indicator-legend-actions button {
    padding: 5px;
    color: var(--text);
    pointer-events: auto;
  }
}

.price-countdown {
  position: absolute;
  /* Sits right on the price-scale gutter, like the library's own last-price
     tag would. */
  right: 2px;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: var(--muted);
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price-countdown.up {
  background: #26a69a;
}

.price-countdown.down {
  background: #ef5350;
}

.price-countdown-value {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.price-countdown-timer {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.85;
}

/* "Closed" is a state, not a number ticking down — read it at full opacity
   with a little extra letter-spacing so it doesn't just look like a countdown
   that got stuck. */
.price-countdown.closed .price-countdown-timer {
  opacity: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Gold Futures Levels volume-profile hover readout — docked at the left
   edge, vertically centred on the hovered strike's row. */
.gfl-profile-readout {
  position: absolute;
  left: 8px;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(20, 23, 31, 0.96);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.gfl-readout-strike {
  color: var(--text);
  font-weight: 700;
}
.gfl-readout-p {
  color: rgb(244, 165, 60);
}
.gfl-readout-c {
  color: rgb(61, 125, 219);
}
.gfl-readout-t {
  color: var(--muted);
}

.cursor-price-badge {
  position: absolute;
  right: 2px;
  transform: translateY(-50%);
  /* Above .price-countdown (6) — a DOM replica of the library's own
     crosshair price label, which we leave enabled: it still paints on the
     chart's canvas underneath both badges either way, so this simply needs
     a higher z-index than the red current-price badge to read as "in front"
     whenever they overlap. Only shown for the main price pane (see
     subscribeCrosshairMove) — indicator sub-panes keep their native label. */
  z-index: 7;
  background: #131722;
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chart-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(19, 23, 34, 0.85);
  color: var(--muted);
  font-size: 13px;
}

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

.chart-loading .spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: chart-spin 0.7s linear infinite;
}

@keyframes chart-spin {
  to {
    transform: rotate(360deg);
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  width: 320px;
  text-align: center;
}

.modal h2 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--danger);
}

.modal p {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

.modal button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.modal button:hover {
  background: var(--accent-hover);
}

.modal-input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 10px;
  font-size: 13px;
  margin-bottom: 20px;
}

.prompt-modal-templates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.prompt-modal-templates.hidden {
  display: none;
}

.prompt-modal-template-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}

.prompt-modal-template-btn:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}

.prompt-modal-template-btn .template-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.prompt-modal-template-btn .template-count {
  font-size: 11px;
  color: var(--muted);
}

.prompt-modal-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 16px;
}

.prompt-modal-divider.hidden {
  display: none;
}

.prompt-modal-divider::before,
.prompt-modal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions button {
  flex: 1;
}

.modal button.modal-btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.modal button.modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

.modal button.modal-btn-danger {
  background: var(--danger);
}

.modal button.modal-btn-danger:hover {
  background: #d92c3c;
}

/* ---- Settings modal ---- */
.settings-modal {
  width: min(380px, calc(100vw - 24px));
  text-align: left;
}
.settings-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin: 8px 0 16px;
}
.settings-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.settings-section h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.settings-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.settings-badge.ok {
  color: #26a69a;
}
.settings-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.settings-kv span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
  font-weight: 600;
}
.settings-kv b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  text-align: right;
}
.settings-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.settings-hint b {
  color: var(--text);
  font-weight: 600;
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.settings-field span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.settings-status {
  min-height: 15px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.settings-status:empty {
  min-height: 0;
  margin: 0;
}
.settings-status.ok {
  color: #26a69a;
}
.settings-status.err {
  color: var(--danger);
}
.settings-actions {
  margin-top: 8px;
}
.settings-actions button {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
}
/* stacked action rows in the locked view sit tighter together */
.settings-actions + .settings-actions {
  margin-top: 6px;
}

/* ============================================================
   Responsive — phones & small tablets (<= 820px)

   The desktop layout is a horizontal strip: left drawing rail |
   chart | resize handle | side panel | right rail. That can't
   fit a phone, so at this breakpoint:
     - the left drawing rail is hidden (drawing on a phone chart
       isn't practical),
     - the right rail becomes a fixed bottom nav bar,
     - the shared side panel becomes a full-screen drawer that
       slides in over the chart when a nav item is tapped
       (app.js starts it collapsed on small screens),
     - the top bar and chart toolbar wrap instead of overflowing.
   ============================================================ */
@media (max-width: 820px) {
  /* ---- Top bar ---- */
  .topbar {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 12px;
  }
  .brand {
    font-size: 16px;
    gap: 6px;
  }
  .brand-logo {
    height: 26px;
  }
  .symbol-picker {
    order: 5;
    flex-basis: 100%;
    max-width: none;
  }
  .source-dropdown {
    min-width: 0;
    flex: 0 1 auto;
    max-width: 42%;
  }
  /* Signed-in email is dead weight on a narrow screen — the logout
     icon stays. */
  .account-name {
    display: none;
  }

  /* ---- Workspace shell ---- */
  .workspace {
    position: relative;
    /* Room for the fixed drawing strip (46px) + bottom nav (52px). */
    padding-bottom: 98px;
  }

  /* Left drawing rail -> horizontal scroll strip pinned just above the
     bottom nav. Tap a tool, then tap the chart to place points; tap a
     placed drawing (in Cursor mode) to open its style popup. */
  #drawing-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 52px;
    width: auto;
    height: 46px;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 55;
  }
  #drawing-rail::-webkit-scrollbar {
    display: none;
  }
  #drawing-tool-list {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-shrink: 0;
  }
  #drawing-rail .side-rail-btn {
    width: 38px;
    height: 36px;
    flex-shrink: 0;
  }
  /* The divider before "Add Alert" is a horizontal line in the vertical
     desktop rail — make it a short vertical rule in the horizontal strip. */
  #drawing-rail .side-rail-divider {
    width: 1px;
    height: 24px;
    margin: 0 3px;
    flex-shrink: 0;
  }

  /* Drawing style popup: center it on touch (opened by tapping a drawing;
     openDrawingStylePopup doesn't clamp its own position). */
  .drawing-style-popup.mobile-centered {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
  }

  /* Right rail -> fixed bottom nav bar. */
  #side-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 52px;
    flex-direction: row;
    justify-content: space-around;
    gap: 4px;
    padding: 6px 10px;
    border-left: none;
    border-top: 1px solid var(--border);
    z-index: 60;
  }
  #side-rail .side-rail-btn {
    width: 46px;
    height: 40px;
  }

  /* ---- Side panel -> full-screen drawer ---- */
  .watchlist-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 52px; /* clears the bottom nav so you can switch tabs */
    width: 100% !important;
    max-width: none;
    /* Above the drawing strip (55) so an open drawer covers it, below the
       bottom nav (60) so tab switching still works. */
    z-index: 56;
    border-left: none;
    transform: translateX(0);
    transition: transform 0.2s ease;
  }
  .watchlist-panel.collapsed {
    /* Override the desktop collapse (width:0 / opacity:0) with a slide-out
       so the drawer keeps its size and just moves off-screen. */
    width: 100% !important;
    opacity: 1;
    transform: translateX(100%);
    border-left: none;
    pointer-events: none;
  }
  .watchlist-resize-handle {
    display: none !important;
  }

  /* ---- Chart toolbar ---- */
  .chart-toolbar {
    gap: 8px;
    padding: 8px 12px;
  }
  .chart-toolbar-left {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  #panel-meta,
  #live-label {
    display: none;
  }
  .panel-symbol {
    font-size: 15px;
  }
  /* Interval + chart-type + reset don't fit on one narrow row — let the
     whole right group scroll sideways instead of overflowing the page. */
  .chart-toolbar-right {
    width: 100%;
    flex-shrink: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chart-toolbar-right::-webkit-scrollbar {
    display: none;
  }
  .btn-group button {
    padding: 6px 9px;
  }

  /* ---- Floating cards ---- */
  .auth-card {
    width: min(340px, calc(100vw - 32px));
    padding: 24px 20px;
  }
  .modal {
    width: min(320px, calc(100vw - 32px));
  }
  .drawing-style-popup,
  .indicator-settings-popup,
  .alert-create-popup,
  .chart-context-menu {
    max-width: calc(100vw - 24px);
  }
  /* Gold Futures Levels has ~13 params — cap the popup and let it scroll. */
  .indicator-settings-popup {
    max-height: 70vh;
    overflow-y: auto;
  }
  .toast-container {
    top: auto;
    bottom: 64px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* Extra-tight phones: drop the pixel-eating live dot label row entirely
   and tighten the toolbar. */
@media (max-width: 400px) {
  .chart-toolbar-left {
    gap: 3px 6px;
  }
  .live-indicator {
    display: none;
  }
  #reset-zoom-btn {
    display: none;
  }
}