/* TradingView-like dark theme */
:root {
  --bg: #131722;
  --panel: #1e222d;
  --border: #2a2e39;
  --text: #d1d4dc;
  --text-dim: #787b86;
  --accent: #2962ff;
  --green: #26a69a;
  --red: #ef5350;
  --ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ui-font-size: 16px;
  --toolbar-font-size: 14px;
  --price-legend-font-size: 15px;
  --overlay-font-size: 14px;
  --indicator-title-size: 14px;
  --indicator-font-size: 13px;
  --table-font-size: 14px;
  --watchlist-font-size: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: var(--ui-font-size)/1.4 var(--ui-font-family);
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* ---- Toolbar ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 54px;
  flex: 0 0 54px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #fff;
  margin-right: 6px;
  white-space: nowrap;
}
.brand b { color: #5f88ff; }
.brand-logo { width: 27px; height: 27px; display: block; flex: 0 0 auto; }

.group { display: flex; align-items: center; gap: 4px; position: relative; }
/* The toolbar groups are flex containers, so the browser's default [hidden]
   rule can otherwise lose to .group. Typography is admin-only. */
#appearanceGroup[hidden] { display: none !important; }
.sep { width: 1px; height: 20px; background: var(--border); }
.spacer { flex: 1; }

.btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.btn:hover { background: #2a2e39; color: var(--text); }
.btn.active { background: var(--accent); color: #fff; }

/* Keep exchange, market, symbol and timeframe controls visually aligned with
   the compact indicator legends, while leaving the Crypto Plot brand distinct. */
.toolbar .btn { font-size: var(--toolbar-font-size); font-weight: 400; }

/* Symbol switcher needs to read as clickable, not as a static label. */
#symbolGroup .btn {
  background: #262b38;
  border-color: #363a45;
  color: var(--text);
  font-weight: 400;
}
#symbolGroup .btn:hover { background: #323847; border-color: #4a4f5e; }
#symbolGroup .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.status { position:absolute; right:12px; bottom:8px; z-index:8; color:var(--text-dim); font-size:12px; white-space:nowrap; padding:3px 6px; border-radius:3px; background:rgba(19,23,34,.72); pointer-events:none; }
.status.error { color: var(--red); }

/* Price-alert manager: a small modal shared by desktop and phone. */
.alerts-modal { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.58); display: flex; align-items: center; justify-content: center; padding: 14px; }
.alerts-card { width: min(480px,100%); max-height: calc(100dvh - 28px); overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.alerts-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }.alerts-head h2{margin:0;font-size:17px}.alerts-head .btn{margin-left:auto}
.alerts-form { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.alerts-form input,.alerts-form select{min-width:0;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:8px;font:inherit}.alerts-form .btn{grid-column:1/-1}.alerts-note{color:var(--text-dim);font-size:12px;margin:9px 0}.alerts-list{border-top:1px solid var(--border);margin-top:14px}.alert-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}.alert-row .alert-main{flex:1}.alert-row .alert-meta{color:var(--text-dim);font-size:11px;margin-top:2px}.alert-row.fired .alert-main{color:var(--green)}
.alert-symbol-picker { position:relative; min-width:0; }
.alert-symbol-picker > input { width:100%; box-sizing:border-box; }
.alert-symbol-results { position:absolute; z-index:6; top:calc(100% + 4px); left:0; right:0; max-height:240px; overflow:auto; padding:4px; background:var(--panel); border:1px solid var(--border); border-radius:6px; box-shadow:0 10px 28px rgba(0,0,0,.38); }
.alert-symbol-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; border:0; border-radius:4px; padding:8px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.alert-symbol-option:hover,.alert-symbol-option:focus { background:#2a3040; outline:none; }
.alert-symbol-option small { color:var(--text-dim); white-space:nowrap; }
.alert-symbol-message { padding:9px 8px; color:var(--text-dim); font-size:12px; }
.tariff-limit-warning { color: var(--red) !important; }

/* ---- Indicator dropdown ---- */
.dropdown {
  position: absolute;
  top: 38px;
  left: 0;
  min-width: 265px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  max-height: 70vh;
  overflow-y: auto;
}
.dropdown label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
}
.dropdown label:hover { background: #2a2e39; }
.dropdown label.sub {
  padding-left: 26px;
  color: var(--text-dim);
  font-size: 14px;
}
.dropdown label strong { font-weight: 600; }
.dropdown.wide { min-width: 430px; right: 0; left: auto; }
.account-menu { min-width: 170px; right: 0; left: auto; }
.account-menu .sym-item { text-decoration: none; }
.account-menu .sym-item.logout { color: var(--red); }

/* ---- Appearance menu ---- */
.typography-menu {
  min-width: 330px;
  padding: 8px 10px 10px;
  /* This menu is the control panel for type itself.  It must remain readable
     and not resize while its sliders are being adjusted. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
}
.typography-menu.typography-menu-pinned { position: fixed; }
.typography-menu * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; }
.settings-modal {
  width: min(640px, calc(100vw - 24px));
  min-width: min(640px, calc(100vw - 24px));
  height: min(510px, calc(100dvh - 82px));
  max-height: min(510px, calc(100dvh - 82px));
  padding: 0;
  overflow: hidden;
}
#viewSettingsMenu.settings-modal[hidden] { display: none; }
#viewSettingsMenu .ind-modal-content { padding: 14px 16px; }
#viewSettingsMenu .settings-panel { max-width: 390px; }
#viewSettingsMenu .settings-display-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 13px !important;
}
#viewSettingsMenu .settings-display-toggle:hover { background: transparent; }
.typography-title { padding: 3px 2px 7px; color: var(--text); font-weight: 600; font-size: 13px !important; }
.dropdown .typography-control {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) 112px 42px;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  color: var(--text-dim);
  font-size: 12px !important;
  cursor: default;
}
.dropdown .typography-control:hover { background: transparent; }
.dropdown .typography-control input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
.dropdown .typography-control output { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.dropdown .typography-control select {
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
}
.dropdown .typography-control.typography-family { grid-template-columns: minmax(135px, 1fr) 162px; }
.typography-reset { width: 100%; margin-top: 7px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: #262b38; color: var(--text); cursor: pointer; font: inherit; font-size: 12px !important; }
.typography-reset:hover { background: #323847; }

/* Full indicator catalogue: deliberately a modal rather than a long toolbar
   dropdown.  Search stays at the top; the left rail separates all indicators,
   favourites and display settings like TradingView's picker. */
#indicatorsMenu.indicator-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  width: min(860px, calc(100vw - 32px));
  height: min(650px, calc(100vh - 52px));
  max-height: none;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  z-index: 250;
  background: #1b1e25;
}
/* The modal needs an explicit hidden rule: its display:flex selector is more
   specific than the browser's generic [hidden] rule. */
#indicatorsMenu.indicator-modal[hidden] { display: none; }
.ind-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
  flex: 0 0 auto;
}
.menu-drag-handle { cursor: grab; touch-action: none; }
.menu-dragging { cursor: grabbing !important; user-select: none; }
.alerts-head.menu-drag-handle { cursor: grab; }
.ind-modal-head h2 { margin: 0; color: #f1f3f6; font-size: 20px; font-weight: 650; }
.ind-modal-close {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 31px;
  line-height: 24px;
  padding: 0 3px;
}
.ind-modal-close:hover { color: #fff; }
#indicatorsMenu.indicator-modal .ind-search {
  width: auto;
  margin: 10px 14px 12px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 15px;
  flex: 0 0 auto;
}
.ind-modal-body { display: flex; min-height: 0; flex: 1 1 auto; border-top: 1px solid var(--border); }
.ind-modal-nav {
  flex: 0 0 205px;
  padding: 12px 8px;
  border-right: 1px solid var(--border);
  background: rgba(19,23,34,.45);
}
.ind-nav-tab {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 10px 11px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ind-nav-tab:hover { background: #2a2e39; }
.ind-nav-tab.active { background: #414141; color: #fff; font-weight: 600; }
.ind-nav-sep { height: 1px; background: var(--border); margin: 10px 8px; }
.ind-modal-content { min-width: 0; flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 14px; }
#indicatorsMenu.indicator-modal .ind-section-title { padding: 5px 8px 8px; }
#indicatorsMenu.indicator-modal .ind-row { border-radius: 4px; }
#indicatorsMenu.indicator-modal .ind-row:hover { background: #2a2e39; }
#indicatorsMenu.indicator-modal .ind-row > label:hover { background: transparent; }
#indicatorsMenu.indicator-modal .ind-view-settings { max-width: 520px; padding: 8px 4px; }
#indicatorsMenu.indicator-modal .ind-view-settings > label,
#indicatorsMenu.indicator-modal .ind-view-settings .ind-row { margin-bottom: 4px; }
.ind-empty { color: var(--text-dim); padding: 26px 14px; font-size: 14px; }
.strategy-catalog { padding: 4px 0 10px; }
.strategy-add { margin: 0 0 10px; }
.strategy-editor-modal {
  position: fixed; inset: 0; z-index: 340;
  background: rgba(5, 9, 18, .42);
}
.strategy-editor-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  box-sizing: border-box; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
}
.strategy-editor-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--border); cursor: grab; user-select: none;
}
.strategy-editor-head:active { cursor: grabbing; }
.strategy-editor-head h2 { margin: 0; font-size: 17px; }
.strategy-editor-close {
  width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent;
  color: var(--text-dim); font: 400 24px/24px Arial, sans-serif; cursor: pointer;
}
.strategy-editor-close:hover { background: rgba(255,255,255,.08); color: var(--text); }
.strategy-editor-card .strategy-form {
  margin: 0; border: 0; border-radius: 0; background: transparent;
}
.strategy-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(19, 23, 34, .52);
}
.strategy-form h3 { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.strategy-form input,
.strategy-form textarea {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  padding: 8px;
  font: inherit;
  font-size: 13px;
}
.strategy-form textarea { resize: vertical; min-height: 88px; max-height: 260px; line-height: 1.4; }
.strategy-image-upload { grid-column: 1 / -1; display: grid; gap: 5px; color: var(--text-dim); font-size: 12px; }
.strategy-image-upload input { padding: 6px; font-size: 12px; }
.strategy-image-preview { grid-column: 1 / -1; display: block; max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); }
.strategy-form .btn { justify-self: start; }
.strategy-note { grid-column: 1 / -1; color: var(--text-dim); font-size: 11px; line-height: 1.35; }
.strategy-disclaimer {
  margin-top: 12px; padding: 10px 12px; border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; line-height: 1.45;
}
.strategy-list { display: grid; gap: 8px; }
.strategy-card { position: relative; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.025); }
.strategy-card.has-image { min-height: 72px; padding-right: 202px; }
.strategy-card-preview { position: absolute; top: 7px; right: 7px; width: 184px; height: calc(100% - 14px); min-height: 58px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); cursor: pointer; }
.strategy-card-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.strategy-card-preview:hover { border-color: var(--accent); }
@media (max-width: 640px) { .strategy-card.has-image { padding-right: 126px; } .strategy-card-preview { width: 112px; } }
.strategy-card-head { display: flex; align-items: center; gap: 8px; }
.strategy-open { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.strategy-open:hover { color: var(--accent); text-decoration: underline; }
.strategy-meta { margin-top: 3px; color: var(--text-dim); font-size: 11px; }
.strategy-body { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 13px; line-height: 1.45; }
.strategy-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.strategy-actions .btn { padding: 5px 8px; font-size: 12px; }
.strategy-editor { display: grid; gap: 8px; margin-top: 10px; }
.strategy-editor input,
.strategy-editor textarea {
  width: 100%; box-sizing: border-box; padding: 7px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.strategy-editor textarea { resize: vertical; min-height: 88px; max-height: 260px; line-height: 1.4; }
.strategy-editor .btn { justify-self: start; }
.strategy-delete { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--text-dim); font: 400 20px/20px Arial, sans-serif; cursor: pointer; }
.strategy-delete:hover { background: rgba(239,83,80,.16); color: #ef5350; }
.strategy-viewer-modal { position: fixed; inset: 0; z-index: 340; background: rgba(5, 9, 18, .42); }
.strategy-viewer-card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 55px rgba(0, 0, 0, .45); }
.strategy-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border); cursor: grab; user-select: none; }
.strategy-viewer-head:active { cursor: grabbing; }
.strategy-viewer-head h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.strategy-viewer-meta { padding: 10px 15px 0; color: var(--text-dim); font-size: 12px; }
.strategy-viewer-image { display: block; width: auto; max-width: calc(100% - 30px); max-height: 460px; object-fit: contain; margin: 14px auto 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.strategy-viewer-body { padding: 14px 15px 18px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 14px; line-height: 1.55; }
.strategy-viewer-image { cursor: zoom-in; }
.strategy-image-lightbox { position: fixed; inset: 0; z-index: 360; display: grid; place-items: center; padding: 24px; box-sizing: border-box; background: rgba(4, 7, 14, .82); }
.strategy-image-lightbox img { display: block; max-width: min(1600px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); object-fit: contain; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); box-shadow: 0 18px 65px rgba(0,0,0,.58); }
.strategy-image-lightbox-close { position: fixed; top: 14px; right: 16px; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: 400 28px/30px Arial, sans-serif; cursor: pointer; }
.strategy-image-lightbox-close:hover { background: rgba(239,83,80,.18); color: #ef5350; }
/* Visibility is controlled from an indicator caption on the chart. Keeping
   the eye out of every catalogue group makes the menu a pure add/settings UI. */
.ind-modal-content .ind-visibility { display: none; }

/* Indicator rows stay compact: the gear opens a separate properties window. */
.dropdown .ind-row { display: flex; align-items: center; }
.dropdown .ind-row > label { flex: 1; }
.dropdown .ind-gear {
  order: 2;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 4px;
}
.dropdown .ind-info {
  order: 2;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--text-dim);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font: 700 12px/16px Georgia, serif;
  text-align: center;
  cursor: pointer;
}
.dropdown .ind-info:hover { color: var(--text); border-color: var(--text); background: #2a2e39; }
.dropdown .ind-visibility {
  order: 2; flex: 0 0 auto; width: 23px; height: 22px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--text-dim);
  font: 14px/20px Arial, sans-serif; cursor: pointer;
}
.dropdown .ind-visibility:hover,
.dropdown .ind-visibility:focus-visible { color: var(--text); background: #2a2e39; outline: none; }
.dropdown .ind-visibility.is-hidden { opacity: .58; }
.dropdown .ind-gear:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.dropdown .ind-gear:hover,
.dropdown .ind-gear:focus-visible { color: var(--text); background: #2a2e39; outline: none; }
.dropdown .ind-star {
  /* The favourite column is always the right edge.  A settings caret, when
     present, sits immediately to its left instead of shifting the star. */
  order: 3;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 5px 7px;
}
.dropdown .ind-star:hover, .dropdown .ind-star.active { color: #f5c518; }
.dropdown .ind-search {
  box-sizing: border-box;
  width: calc(100% - 12px);
  margin: 4px 6px 6px;
  padding: 7px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.dropdown .ind-search:focus { border-color: var(--accent); }
.dropdown .ind-section-title {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .25px;
  padding: 7px 8px 3px;
  text-transform: uppercase;
}
.dropdown .ind-favorites { border-bottom: 1px solid var(--border); margin-bottom: 3px; }
.dropdown .ind-favorites:empty, .dropdown .ind-section.search-empty { display: none; }
.dropdown .ind-param { justify-content: space-between; gap: 10px; }
.dropdown .ind-param input, .dropdown .ind-param select {
  width: 78px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
}
.dropdown .ind-param select { width: 128px; }

/* Locked features: shown, not hidden, behind a red padlock. */
.lock { display: inline-flex; align-items: center; margin-left: 6px; line-height: 0; }
.lock svg { fill: #ff4d4f; display: block; }
.dropdown .ind-row.locked > label { opacity: 0.55; cursor: not-allowed; }
.dropdown .ind-row.locked > label strong { color: var(--text-dim); }
.dropdown .ind-row.locked input { cursor: not-allowed; }
.dropdown .ind-lock-plan {
  margin-left: 4px;
  white-space: nowrap;
  color: #ff8b8d;
  font-size: 11px;
  line-height: 1;
}
.btn.locked {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: rgba(255, 77, 79, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.btn.locked:hover { background: var(--panel); }
.dropdown .sym-item.locked {
  opacity: 0.6;
  cursor: not-allowed;
  justify-content: space-between;
}
.dropdown .sym-item.locked:hover { background: transparent; }

/* Symbol picker rows inside the dropdown (single-select, no checkbox). */
.dropdown .sym-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 26px 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.dropdown .sym-item .sym-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* Favourite toggle on each picker row — the phone's only way to curate the list. */
.sym-star {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
}
.sym-star.on, .sym-star:hover { color: #f5c518; }
.dropdown .sym-item.active .sym-star { color: #fff; }
.dropdown .sym-item.active .sym-star.on { color: #ffe08a; }
/* Bigger finger target for the star on a phone (the desktop 25px is fine with a
   mouse, but too small to tap reliably). Its padding also lifts the row height,
   so the coin name beside it is an easy tap too. */
@media (max-width: 700px) {
  /* Use the visual mobile viewport, not the taller layout viewport behind the
     browser UI. This keeps the chart shell above the bottom browser controls. */
  html, body { height: 100dvh; }

  .sym-star { padding: 10px 12px; font-size: 19px; }
}
.dropdown .sym-item:hover { background: #2a2e39; }
.dropdown .sym-item.active { background: var(--accent); color: #fff; }
.dropdown .sym-item.muted { color: var(--text-dim); cursor: default; }
.dropdown .sym-item.muted:hover { background: transparent; }

/* Timeframe catalogue: stars pin only the shortcuts in the top toolbar. */
.interval-menu { min-width: 310px; }
.interval-menu-title { color: var(--text-dim); font-size: 12px; padding: 5px 10px 7px; border-bottom: 1px solid var(--border); margin-bottom: 3px; }
.dropdown .sym-item.interval-item { padding-right: 8px; }
.interval-pin { font-size: 18px; min-width: 28px; }
.interval-lock-plan { flex: 0 0 auto; color: #ff8b8d; font-size: 11px; line-height: 1; white-space: nowrap; }

/* Spot / Futures uses the same compact text-button language as the indicator
   and appearance menus; only the selected market receives the blue state. */
.market-toggle { display: inline-flex; gap: 2px; margin-right: 6px; }
.mkt-btn {
  padding: 5px 10px;
  font: inherit;
  font-size: var(--toolbar-font-size);
  font-weight: 400;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 4px;
}
.mkt-btn:hover { background: #323847; color: var(--text); }
.mkt-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Full-exchange symbol picker: a sticky search box over a scrolling list.
   Scoped to :not([hidden]) so the id's specificity does not override the
   browser's [hidden]{display:none} and leave the menu stuck open. */
#symbolMenu:not([hidden]) {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
  min-width: 220px;
}
.symbol-picker-filters { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.symbol-picker-filters #exchangeBtn { padding: 5px 8px; font-size: 12px; }
.symbol-picker-filters .market-toggle { margin: 0; }
.symbol-picker-filters .mkt-btn { padding: 5px 7px; font-size: 12px; }
#symbolMenu #exchangeMenu { z-index: 55; top: 34px; left: 0; }
.sym-search {
  flex: 0 0 auto;
  margin-bottom: 6px;
  padding: 7px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.sym-search:focus { border-color: var(--accent); }
.sym-list { flex: 1 1 auto; overflow-y: auto; }

.dropdown .hint {
  padding: 6px 8px;
  color: var(--text-dim);
  font-size: 13px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
/* Divider under the display option at the top of the indicators menu. */
.dropdown .menu-sep {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

/* Legend captions, hidden on demand from the menu to reclaim the top of a
   pane. Split so the price line (coin name + OHLC) and the indicator captions
   can be hidden independently. */
body.no-ind-legends .legend-ind { display: none; }
body.no-price-legend .legend-price { display: none; }

/* A compact, permanent beta status keeps the chart available while making the
   product stage clear to every visitor. */
.chart-beta-notice { flex: 0 0 auto; padding: 5px 12px; border-bottom: 1px solid #29486a; background: linear-gradient(90deg, rgba(41,98,255,.14), rgba(34,211,182,.06)); color: #aebed4; font-size: 12px; line-height: 1.35; }
.chart-beta-notice strong { color: #dce8ff; }
.chart-beta-notice a { margin-left: 8px; color: #8fb0ff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.chart-beta-notice a:hover { color: #c8d8ff; text-decoration: underline; }
@media (max-width: 700px) { .chart-beta-notice { padding: 4px 10px; font-size: 11px; } }

/* ---- Chart panes ---- */
#main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}
#panes {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
}

/* A symbol/TF switch first fetches a small candle-only page. Mask the old
   canvases during that short request so their prices can never be mistaken for
   data belonging to the newly selected toolbar state. */
#panes.view-loading::after {
  content: attr(data-loading-label);
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: rgba(19, 23, 34, .76);
  color: #aebed4;
  font-size: 14px;
  letter-spacing: .15px;
  pointer-events: auto;
}

.chart-watermark {
  position: absolute;
  left: 12px;
  bottom: 13px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(202, 215, 239, .58);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
}
.chart-watermark img { width: 23px; height: 23px; opacity: .78; }
.chart-version {
  margin-left: 1px;
  color: rgba(160, 177, 207, .62);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15px;
}

/* ---- Watchlist (right dock) ---- */
.watchlist {
  --wl-grid: minmax(98px, 1.35fr) minmax(65px, .82fr) minmax(54px, .72fr) minmax(58px, .72fr) 22px;
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  min-height: 0;
  overflow: hidden;
  position: relative;
}
/* Drag handle on the panel's inner-left edge to resize its width. */
.wl-resizer {
  position: absolute;
  left: 0; top: 0;
  width: 6px; height: 100%;
  cursor: ew-resize;
  z-index: 5;
}
.wl-resizer:hover, .wl-resizer.dragging { background: rgba(41,98,255,.35); }
.watchlist.collapsed .wl-resizer { display: none; }
.watchlist.collapsed { flex-basis: 30px; }
.watchlist.collapsed .wl-head,
.watchlist.collapsed .wl-columns,
.watchlist.collapsed .wl-list { display: none; }
.watchlist .wl-rail { display: none; }
.watchlist.collapsed .wl-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
  font-size: 13px;
}
.watchlist.collapsed .wl-rail:hover { color: var(--text); background: #262b38; }

.wl-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px 6px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.wl-title { flex: 1; font-weight: 600; font-size: calc(var(--watchlist-font-size) + 1px); color: var(--text); white-space: nowrap; }
.wl-btn {
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  background: #262b38;
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.wl-btn:hover { background: #323847; color: var(--text); }
.wl-btn.wl-clear { color: #e66b73; font-size: 20px; }
.wl-btn.wl-clear:hover { background: rgba(239,83,80,.16); color: #ff8a8a; }
.wl-btn:disabled { opacity: .42; cursor: default; }

.wl-columns,
.wl-row {
  display: grid;
  grid-template-columns: var(--wl-grid);
  column-gap: 6px;
  align-items: center;
}
.wl-columns {
  flex: 0 0 auto;
  padding: 0 8px 0 10px;
  min-height: 34px;
  border-bottom: 1px solid var(--border);
  background: #191d27;
}
.wl-column {
  min-width: 0;
  height: 33px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: clamp(10px, calc(var(--watchlist-font-size) - 1px), 23px);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.wl-column:first-child { text-align: left; }
.wl-column:hover, .wl-column.active { color: var(--text); }
.wl-instrument-column {
  display: flex;
  align-items: center;
  gap: 3px;
  text-align: left;
}
.wl-column-name {
  min-width: 0;
  flex: 1 1 auto;
  height: 33px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.wl-column-name:hover, .wl-column-name.active { color: var(--text); }
.wl-flag-sort {
  flex: 0 0 18px;
  width: 18px;
  height: 23px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: #697180;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.wl-flag-sort:hover { color: #cbd1dd; background: #282e3a; }
.wl-flag-sort.active { color: #f0c85a; background: rgba(240,200,90,.12); }

.wl-list {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3f4d transparent;
}
.wl-row {
  min-height: 29px;
  padding: 4px 8px 4px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(42,46,57,.6);
  position: relative;
  user-select: none;
}
.wl-row:hover { background: #2a2e39; }
.wl-row.active {
  background: rgba(41,98,255,.13);
  box-shadow: inset 0 0 0 1px #868b98;
  border-radius: 4px;
}
.wl-row.dragging, .wl-row.manual-dragging { opacity: .45; cursor: grabbing; }
body.wl-manual-dragging, body.wl-manual-dragging * { cursor: grabbing !important; }
.wl-row.drop-before::before,
.wl-row.drop-after::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--accent);
  z-index: 4;
}
.wl-row.drop-before::before { top: -1px; }
.wl-row.drop-after::after { bottom: -1px; }

.wl-instrument {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.wl-coin {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  background: #4f596c;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.6px;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  position: relative;
}
.wl-coin-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: #1e222d;
}
.wl-coin.coin-btc { background: #f7931a; font-size: 14px; }
.wl-coin.coin-eth { background: #627eea; font-size: 11px; }
.wl-coin.coin-sol { background: linear-gradient(145deg, #9945ff, #14f195 55%, #2a2e39); font-size: 15px; }
.wl-coin.coin-bnb { background: #f3ba2f; color: #242936; font-size: 11px; }
.wl-coin.coin-xrp { background: #23292f; font-size: 12px; }
.wl-coin.coin-usdt { background: #26a17b; font-size: 13px; }
.wl-coin.coin-usdc { background: #2775ca; font-size: 12px; }
.wl-coin.coin-doge { background: #c2a633; font-size: 13px; }
.wl-coin.coin-ada { background: #2a6df4; }
.wl-coin.coin-trx { background: #ef0027; font-size: 13px; }
.wl-coin.coin-ton { background: #0098ea; font-size: 14px; }
.wl-coin.coin-avax { background: #e84142; }
.wl-coin.coin-link { background: #2a5ada; font-size: 12px; }
.wl-coin.coin-ltc { background: #345d9d; font-size: 13px; }
.wl-coin.coin-generic { background: #4b5568; font-size: 9px; letter-spacing: -.4px; }
.wl-sym {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: var(--watchlist-font-size);
  color: var(--text);
  white-space: nowrap;
}
.wl-exchange {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: calc(var(--watchlist-font-size) - 2px);
  font-weight: 600;
  letter-spacing: .15px;
  white-space: nowrap;
}
.wl-number {
  min-width: 0;
  text-align: right;
  font-size: var(--watchlist-font-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-dim);
}
.wl-number.up { color: var(--green); }
.wl-number.down { color: var(--red); }
.wl-price.neutral, .wl-price.up, .wl-price.down { color: var(--text); }
.wl-remove-head { display: block; }
.wl-remove {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #778092;
  font: 20px/18px Arial, sans-serif;
  cursor: pointer;
}
.wl-remove:hover { background: rgba(242,54,69,.16); color: #f23645; }

.wl-flag {
  flex: 0 0 12px;
  width: 12px;
  height: 15px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.wl-flag::before,
.wl-palette-swatch:not(.clear)::before {
  content: "";
  display: block;
  width: 11px;
  height: 14px;
  background: #5d6371;
  clip-path: polygon(0 0, 100% 17%, 72% 50%, 100% 83%, 0 100%);
  opacity: .3;
}
.wl-flag:hover::before { opacity: .7; }
.wl-flag.flag-red::before, .wl-palette-swatch.flag-red::before { background: #f23645; opacity: 1; }
.wl-flag.flag-orange::before, .wl-palette-swatch.flag-orange::before { background: #ff9800; opacity: 1; }
.wl-flag.flag-yellow::before, .wl-palette-swatch.flag-yellow::before { background: #f5c518; opacity: 1; }
.wl-flag.flag-green::before, .wl-palette-swatch.flag-green::before { background: #22ab94; opacity: 1; }
.wl-flag.flag-blue::before, .wl-palette-swatch.flag-blue::before { background: #2962ff; opacity: 1; }
.wl-flag.flag-purple::before, .wl-palette-swatch.flag-purple::before { background: #9c6ade; opacity: 1; }
.wl-flag-palette {
  position: absolute;
  left: 6px;
  top: 25px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid #4b5160;
  border-radius: 5px;
  background: #242936;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.wl-palette-swatch {
  width: 17px;
  height: 18px;
  padding: 2px 3px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.wl-palette-swatch:hover { background: #3a4050; }
.wl-palette-swatch.clear { font-size: 17px; line-height: 12px; }
.wl-empty { padding: 14px 12px; color: var(--text-dim); font-size: 13px; }

/* Delisting (settling) contracts: shown, but visibly muted. */
.wl-row.settle .wl-sym, .dropdown .sym-item.settle { color: var(--text-dim); }

/* On a phone the dock would eat the chart; hide it under 700px — only the
   toolbar's symbol dropdown remains for switching pairs. */
@media (max-width: 700px) { .watchlist, #main > .watchlist { display: none; } }
.pane-wrap {
  display: flex;
  flex-direction: column;
  /* A pane may shrink when several saved panel heights no longer fit the
     viewport, but never into the misleading one-pixel strip seen at bottom. */
  min-height: 72px;
  overflow: hidden;
  position: relative;
}
.pane { width: 100%; position: relative; flex: 1 1 auto; min-height: 0; }

/* Appears only after the user has panned away from the live right edge. */
.go-realtime {
  position: absolute;
  /* Keep this control inside the chart canvas. The right-side price scale and
     its live price labels remain fully readable. */
  right: 92px;
  /* Keep the return-to-latest control above the bar-count/status line. */
  bottom: 48px;
  z-index: 8;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(30, 34, 45, .96);
  color: var(--text);
  font: 700 22px/22px system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, background .14s ease;
}
.dropdown .sym-add-all { width: calc(100% - 16px); margin: 2px 8px 7px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; background: rgba(41,98,255,.12); color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.dropdown .sym-add-all:hover { background: rgba(41,98,255,.24); border-color: var(--accent); }
/* Exchange choices reuse the instrument-row rhythm but are real buttons. */
.dropdown button.sym-item { width: 100%; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
.dropdown button.sym-item.active { background: var(--accent); color: #fff; }
.go-realtime.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.go-realtime:hover { background: var(--accent); color: #fff; }

/* Persistent lower-pane ordering controls. They are not part of the legend,
   so hiding indicator explanations never hides the way to reorder panels. */
.pane-order-controls {
  position: absolute;
  top: 8px;
  right: 94px;
  z-index: 14;
  display: flex;
  gap: 4px;
  pointer-events: auto;
}
.pane-order-controls[hidden] { display: none; }
.pane-order-button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(30, 34, 45, .96);
  color: var(--text);
  font: 700 16px/20px system-ui, sans-serif;
  cursor: pointer;
}
.pane-order-button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pane-order-button[hidden] { display: none; }

/* ---- Drawing tool rail (TradingView-style, full-height, left of all panes) ---- */
.draw-rail {
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}
.draw-rail button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s, color .12s;
}
.draw-rail button svg { width: 20px; height: 20px; display: block; }
.draw-rail button:hover { background: var(--border); color: var(--text); }
.draw-rail button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.draw-color-input { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.draw-color-button { color: #4CAF50; }
.draw-rail .rail-sep { flex: 0 0 auto; width: 22px; height: 1px; background: var(--border); margin: 4px 0; }
.draw-rail .rail-spacer { flex: 1 1 auto; }
.pane.draw-active { cursor: crosshair; }

/* Object manager for the drawing rail. It stays out of the chart flow and is
   deliberately compact: each saved object can be selected, hidden, locked or
   removed without hunting for a thin line on the chart. */
.draw-objects {
  position: absolute; left: 48px; top: 54px; z-index: 30; width: 235px;
  max-height: min(420px, calc(100vh - 72px)); overflow-y: auto;
  background: #1e222d; border: 1px solid #363c4a; border-radius: 5px;
  box-shadow: 0 8px 22px rgba(0,0,0,.38); color: var(--text);
}
.draw-objects[hidden] { display: none; }
.draw-objects-head { padding: 10px 11px 8px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border); }
.draw-objects-empty { padding: 14px 11px; color: var(--text-dim); font-size: 12px; }
.draw-object { display: flex; align-items: center; min-height: 32px; border-bottom: 1px solid rgba(54,60,74,.7); }
.draw-object.selected { background: rgba(41,98,255,.18); }
.draw-object-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px 6px 11px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 12px; }
.draw-object-action { width: 27px; height: 27px; border: 0; border-radius: 3px; background: transparent; color: var(--text-dim); cursor: pointer; padding: 0; }
.draw-object-action:hover, .draw-object-name:hover { background: #2a2e39; color: var(--text); }

/* Drawing dropdown — phones only (hidden on desktop; the media query shows it). */
.draw-mobile { display: none; }
.draw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.draw-item:hover { background: #2a2e39; }
.draw-item.active { background: var(--accent); color: #fff; }
.draw-item .di { display: inline-flex; }
.draw-item .di svg { width: 20px; height: 20px; display: block; }

/* On phones: hide the left rail, show the pencil dropdown instead. Placed after
   the base .draw-rail/.draw-mobile rules so it wins (equal specificity, later
   source order — a media query does not add specificity on its own). */
@media (max-width: 700px) {
  .draw-rail { display: none; }
  .draw-mobile { display: flex; }
  .draw-objects { left: 8px; right: 8px; top: 50px; width: auto; }
}

/* Draggable splitter between the price and indicator panes */
.pane-divider {
  height: 8px;
  flex: 0 0 8px;
  background: var(--border);
  cursor: row-resize;
  position: relative;
  transition: background .12s;
  /* Without this the browser claims the vertical drag as a scroll gesture and
     the pointermove stream stops mid-drag. */
  touch-action: none;
  user-select: none;
}
.pane-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-dim);
  opacity: .5;
}
/* Blue while actually dragging — this is driven by a JS class, so it is
   removed the moment the drag ends, on touch and mouse alike. */
.pane-divider.dragging { background: var(--accent); }
/* The hover highlight is gated to a real hovering mouse. On a touch screen
   :hover sticks after a tap and would leave the bar stuck blue; some phones
   even report `hover: hover`, so the pointer must be fine (a mouse) too. */
@media (hover: hover) and (pointer: fine) {
  .pane-divider:hover { background: var(--accent); }
}
body.resizing { cursor: row-resize; user-select: none; }

/* Read-outs over the candles. Each table can be moved independently; the
   right scale remains reserved so price labels always stay readable. */
.info-stack {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}
.info-box {
  position: absolute;
  background: rgba(30, 34, 45, .92);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  white-space: nowrap;
}
.info-box.dragging { opacity: .88; user-select: none; }
.ib-drag-handle {
  position: absolute;
  top: 4px;
  right: 23px;
  width: 17px;
  height: 18px;
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  font: 16px/16px sans-serif;
  cursor: grab;
  touch-action: none;
}
.ib-drag-handle:hover { background: rgba(255,255,255,.1); color: var(--text); }
.ib-drag-handle:active { cursor: grabbing; }
.ib-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 17px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  padding: 0;
  background: transparent;
  color: var(--text-dim);
  font: 19px/16px sans-serif;
  cursor: pointer;
}
.ib-close:hover { background: rgba(239,83,80,.18); color: #ff8a8a; }
.info-box .ib-title { font-weight: 600; margin-bottom: 6px; color: #fff; }
.info-box table { border-collapse: collapse; }
.info-box td { padding: 2px 8px 2px 0; font-variant-numeric: tabular-nums; }
.info-box td:last-child { padding-right: 0; }
.info-box .ib-head { color: var(--text-dim); font-size: clamp(10px, calc(var(--table-font-size) - 1px), 23px); font-weight: 500; }
.info-box .ib-key { color: var(--text-dim); }
.info-box .ib-val { text-align: right; }
.info-box .ib-verdict { margin-top: 6px; font-weight: 600; }
.info-box .ib-note { margin-top: 4px; color: var(--text-dim); font-size: clamp(10px, calc(var(--table-font-size) - 2px), 22px); }

/* A denser variant for boxes that are secondary to the chart. Every compact
   box is pinned to one width so the stack reads as one set of read-outs
   rather than a ragged column; the value column is stretched to that width
   and the free-text lines wrap inside it instead of widening the box. */
.info-box { font-size: var(--table-font-size); }
.info-box.compact { font-size: clamp(10px, calc(var(--table-font-size) - 2px), 22px); padding: 5px 24px 5px 8px; border-radius: 5px; width: 200px; }
.info-box.compact .ib-title { font-size: inherit; margin-bottom: 3px; }
.info-box.compact table { width: 100%; }
.info-box.compact td { padding: 1px 7px 1px 0; }
/* Long labels wrap so they never widen the box; the reading beside them,
   usually a number, is kept on one line. */
.info-box.compact .ib-key { white-space: normal; }
.info-box.compact .ib-val { white-space: nowrap; }
.info-box.compact .ib-verdict { margin-top: 3px; font-size: inherit; white-space: normal; }
.info-box.compact .ib-note { margin-top: 2px; font-size: clamp(10px, calc(var(--table-font-size) - 3px), 21px); white-space: normal; }

.legend {
  position: relative;
  z-index: 10;
  padding: 7px 14px 0;
  font-size: var(--price-legend-font-size);
  color: var(--text-dim);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  pointer-events: none;
  flex: 0 0 auto;
}
.legend-ind.pane-reorder-handle {
  pointer-events: auto;
  cursor: grab;
}
.legend-ind.pane-reorder-handle:active { cursor: grabbing; }
.pane-wrap.pane-dragging { opacity: .45; }
.pane-wrap.pane-drop-target { outline: 1px solid var(--blue, #2962ff); outline-offset: -1px; }
.legend .item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.legend .title { color: var(--text); font-weight: 600; }
.legend .val { color: var(--text); font-variant-numeric: tabular-nums; }
.legend .note { color: var(--text-dim); font-size: 13px; font-style: italic; }
.legend-glyph { display: inline-block; min-width: 11px; font-weight: 700; line-height: 1; }
/* Indicator legends carry many series at once. Keep them quieter and denser
   than the instrument/OHLC header, so the chart remains the focal point. */
.legend-ind { font-size: var(--indicator-font-size); }
.legend-ind .title { font-size: var(--indicator-title-size); font-weight: 400; }
.legend-ind .note { font-size: clamp(10px, calc(var(--indicator-font-size) - 1px), 23px); }
.overlay-indicators {
  /* Price-pane captions are an overlay, not another row in the flex column:
     several enabled tools must never reduce the candle canvas height. */
  position: absolute;
  top: 31px;
  left: 0;
  z-index: 11;
  padding-top: 3px;
  gap: 3px;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  max-height: calc(100% - 42px);
  overflow: auto;
  font-size: var(--overlay-font-size);
  pointer-events: auto;
}
.indicator-caption {
  pointer-events: auto;
  gap: 2px !important;
}
.indicator-caption-title {
  margin: 0;
  padding: 1px 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.indicator-caption:hover .indicator-caption-title,
.indicator-caption:focus-within .indicator-caption-title,
.indicator-caption.is-actions-open .indicator-caption-title {
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.indicator-caption-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, visibility .14s ease;
}
.indicator-caption:hover .indicator-caption-actions,
.indicator-caption:focus-within .indicator-caption-actions,
.indicator-caption.is-actions-open .indicator-caption-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.indicator-caption-action {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  font: 700 15px/14px Arial, sans-serif;
  cursor: pointer;
}
.indicator-caption-action:hover,
.indicator-caption-action:focus-visible {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
  outline: none;
}
.indicator-caption.is-hidden .indicator-caption-title { color: var(--text-dim); text-decoration: line-through; opacity: .75; }
.indicator-visibility { font-size: 13px; }
.indicator-visibility.is-hidden { opacity: .6; }
.indicator-remove { font-size: 17px; }
.indicator-remove:hover,
.indicator-remove:focus-visible {
  background: rgba(242,54,69,.18);
  border-color: rgba(242,54,69,.28);
  color: #f23645;
}

/* Individual indicator properties are intentionally independent from the
   catalogue. The header is the only drag handle, so inputs remain easy to use. */
.indicator-settings-window {
  position: fixed;
  z-index: 260;
  width: min(480px, calc(100vw - 24px));
  max-height: min(650px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid rgba(87, 124, 205, .7);
  border-radius: 9px;
  box-shadow: 0 18px 48px rgba(0,0,0,.58);
  overflow: hidden;
  color: var(--text);
}
.indicator-info-window {
  position: fixed;
  z-index: 270;
  width: min(390px, calc(100vw - 24px));
  background: var(--panel);
  border: 1px solid rgba(87, 124, 205, .7);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.indicator-info-window[hidden] { display: none; }
.indicator-info-window-body {
  padding: 14px 16px 16px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.indicator-settings-window[hidden] { display: none; }
.indicator-settings-window-head {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(100deg, rgba(43, 91, 190, .22), rgba(23, 27, 37, .92));
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.indicator-settings-window-head:active { cursor: grabbing; }
.indicator-settings-window-title { flex: 1; font-size: 15px; }
.indicator-settings-window-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: 400 24px/24px Arial, sans-serif;
  cursor: pointer;
}
.indicator-settings-window-close:hover,
.indicator-settings-window-close:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: none; }
.indicator-settings-window-reset {
  margin-right: 7px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  color: var(--text-dim);
  font: 600 12px/16px var(--ui-font-family, system-ui, sans-serif);
  cursor: pointer;
}
.indicator-settings-window-reset:hover,
.indicator-settings-window-reset:focus-visible {
  border-color: var(--accent);
  background: rgba(41,98,255,.15);
  color: var(--text);
  outline: none;
}
.indicator-settings-window-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 8px 14px 14px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dialog-actions .btn { min-width: 92px; }
.indicator-settings-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px;
}
.indicator-settings-actions .indicator-settings-window-reset { margin-right: auto; }
.settings-dialog-actions { margin: 0; padding: 10px 16px; }
.indicator-settings-group { margin: 0; padding: 10px 0 4px; border-top: 1px solid var(--border); }
.indicator-settings-group:first-child { border-top: 0; padding-top: 4px; }
.indicator-settings-group h3 {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.indicator-setting-check,
.indicator-setting-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  color: var(--text);
  font-size: 13px;
}
.indicator-setting-check { cursor: pointer; }
.indicator-setting-check input { margin: 0; accent-color: var(--blue); }
.indicator-setting-field { justify-content: space-between; }
.indicator-setting-field > input,
.indicator-setting-field > select {
  width: 190px;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.indicator-setting-field > input[type="color"] { height: 28px; padding: 2px; }
.indicator-settings-empty { margin: 8px 0; color: var(--text-dim); font-size: 13px; }
.ind-entry.properties-target { box-shadow: inset 3px 0 var(--blue, #2962ff); }

/* ---- Phones and other narrow screens ----
   The toolbar is a single non-wrapping row built for a desktop; on a narrow
   screen its buttons run off the right edge, and with the page's scroll
   disabled they cannot be reached. Here the toolbar is allowed to grow onto
   several rows so every control stays on screen, and the dropdown menus —
   one of which is wider than a phone — open as a full-width panel that
   scrolls inside itself instead of spilling past the edge. */
@media (max-width: 700px) {
  .toolbar {
    flex: 0 0 44px;
    height: 44px;
    min-height: 44px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    column-gap: 4px;
    padding: 4px 6px;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  /* Each group is itself a non-wrapping row; the interval group alone holds
     ~16 buttons and is wider than the screen. Let the buttons inside a group
     wrap too, otherwise the group overflows even though the toolbar wrapped. */
  .group { flex: 0 0 auto; flex-wrap: nowrap; }
  /* On a phone the timeframe is a dropdown (built by JS), like the symbol
     picker, so both sit on the top row with the menu buttons — no swipe strip,
     no row of its own. */
  #symbolGroup, #intervalGroup { flex: 0 1 auto; }
  /* Just a label; dropping it frees a whole slot on a cramped bar. */
  .brand { display: none; }
  .sep { display: none; }
  .spacer { display: none; }
  /* Global typography is configured from desktop only; keep the phone toolbar
     focused on chart controls. */
  #appearanceGroup { display: none !important; }
  /* The buttons inherit the 16px base font, which is oversized on a phone.
     Smaller text with padding kept generous enough to stay a finger target. */
  .btn, .toolbar .btn { font-size: 11px; padding: 6px 6px; }
  .mkt-btn { font-size: 11px; padding: 6px 6px; }
  /* Ticker buttons are just three or four letters — trim their side padding so
     the symbols and both menu buttons all clear one row. */
  #symbolGroup .btn { padding: 6px 6px; }
  #symbolGroup { gap: 3px; }
  /* Preserve the account menu but collapse it to one compact button. */
  #accountGroup .btn { width: 30px; height: 30px; padding: 0; font-size: 0; }
  #accountGroup .btn::before { content: "☰"; font-size: 17px; line-height: 30px; }
  /* The routine status (bar count and refresh time) is the least essential
     thing on a cramped screen, so it is dropped to free a whole row — but an
     error must never be swallowed, so that variant is shown on its own line. */
  .status { display: none; }
  .status.error {
    display: block;
    flex-basis: 100%;
    order: 99;
    font-size: 13px;
    white-space: normal;
  }

  /* Both menus open as a panel pinned to the screen, not to their button, so
     neither their width nor the toolbar's wrapping can push them off-view. */
  .dropdown,
  .dropdown.wide {
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    /* dvh, not vh: on phones 100vh counts the area behind the address/nav bars,
       so a vh-sized menu overruns the screen and its last row (1M) hides behind
       the browser chrome with no way to scroll to it. dvh is the real viewport. */
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 200;
  }
  #indicatorsMenu.indicator-modal {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    transform: none;
    z-index: 250;
  }
  #viewSettingsMenu.settings-modal {
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    z-index: 250;
  }
  #viewSettingsMenu .ind-modal-content { padding: 10px; }
  #viewSettingsMenu .settings-panel { max-width: none; }
  /* Every nested menu gets one compact type scale.  Without explicit mobile
     sizes, these controls inherit the global desktop font and wrap each short
     label across several oversized lines. */
  .dropdown label, .dropdown .sym-item { font-size: 12px; }
  .dropdown label { padding: 7px 8px; }
  .dropdown label.sub { padding-left: 24px; }
  .ind-modal-nav { flex-basis: 132px; padding: 7px 4px; }
  .ind-nav-tab { padding: 8px 6px; font-size: 12px; }
  .ind-nav-sep { margin: 7px 6px; }
  .ind-modal-content { padding: 6px; }
  .ind-modal-head { padding: 11px 12px 4px; }
  .ind-modal-head h2 { font-size: 16px; }
  .ind-modal-close { font-size: 26px; }
  #indicatorsMenu.indicator-modal .ind-search { margin: 7px 12px 9px; padding: 8px 10px; font-size: 13px; }
  #indicatorsMenu.indicator-modal .ind-section-title { padding: 4px 6px 6px; font-size: 10px; }
  #indicatorsMenu.indicator-modal .ind-row > label,
  #indicatorsMenu.indicator-modal .ind-view-settings > label {
    padding: 6px 5px;
    font-size: 12px;
    line-height: 1.25;
  }
  #indicatorsMenu.indicator-modal .ind-row > label strong,
  #indicatorsMenu.indicator-modal .ind-view-settings > label strong { font-size: 12px; }
  #indicatorsMenu.indicator-modal .ind-gear { padding: 4px 5px; font-size: 13px; }
  #indicatorsMenu.indicator-modal .ind-star { padding: 4px 5px; font-size: 14px; }
  #indicatorsMenu.indicator-modal .ind-param input,
  #indicatorsMenu.indicator-modal .ind-param select { font-size: 11px; }
  .ind-empty { padding: 16px 8px; font-size: 12px; }

  /* Read-outs hug the right edge instead of leaving a desktop-sized gutter. */
  .info-stack { inset: 0; }

  /* The per-pane legend is the biggest space thief on a phone: a pane with
     seven series wraps its legend over four or five rows at the desktop size,
     covering half the chart. Shrink the text and tighten the gaps so it reads
     as a compact caption over the pane instead. */
  .legend { font-size: 10px; padding: 3px 6px 0; gap: 2px 7px; }
  .legend .swatch { width: 9px; height: 9px; }
  .legend .note { font-size: 9px; }
  .legend .val { font-size: 10px; }
  .legend-ind .title { font-size: 11px; }
  .legend-ind .note { font-size: 9px; }
  .overlay-indicators { font-size: 10px; top: 25px; }
  /* A tap on the caption opens the same eye/gear/remove actions as desktop
     hover. Give those controls a real finger target while the row is open. */
  .indicator-caption.is-actions-open { padding: 1px 2px; border-radius: 4px; background: rgba(30,34,45,.88); }
  .indicator-caption.is-actions-open .indicator-caption-action {
    width: 26px; height: 26px; font-size: 15px; line-height: 24px;
  }
  .indicator-caption.is-actions-open .indicator-remove { font-size: 19px; }
  .indicator-settings-window { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .indicator-settings-window-body { max-height: calc(100dvh - 70px); }
  /* The desktop reserve protects a wide price scale.  On phones it leaves the
     reorder arrows stranded in the middle of the pane, so tuck them beside it. */
  .pane-order-controls { right: 52px; }

  /* The visible bar stays thin, but an invisible grab margin above and below
     stretches the touch target to ~33px so a finger still catches it — an 8px
     line alone is impossible to hit, the touch lands on the chart beside it. */
  .pane-divider { height: 4px; flex-basis: 4px; }
  .pane-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    bottom: -14px;
    z-index: 30;
  }
  /* The drag floor is 90px per pane; let the panes actually reach it instead of
     being held at the desktop minimum, or the divider looks stuck once a pane
     is small. */
  .pane-wrap {
    min-height: 90px;
    /* Desktop sizes are saved as pixels. On a phone those same bases can be
       taller than the visible viewport and push a second indicator below the
       browser's lower edge. Let every saved pane shrink proportionally while
       respecting this usable 90px minimum. */
    flex-shrink: 1 !important;
  }
}

/* Short screens — a phone held sideways. There is barely any height, so the
   per-pane minimum has to drop or three stacked panes overflow and squash the
   price chart. Let them shrink to fit and trim the toolbar. Keyed on height so
   it catches landscape at any width. */
@media (max-height: 500px) {
  .pane-wrap { min-height: 44px; }
  .toolbar { height: 44px; flex-basis: 44px; min-height: 44px; }
}

/* Logout: a link styled as a toolbar button, with a sign-out red hover. */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn.logout { color: var(--text-dim); }
.btn.logout:hover { background: rgba(239,83,80,.15); color: var(--red); }

/* Dropdown close bar — desktop closes menus by clicking outside, so it is hidden
   there; on a phone the menus open full-screen with no outside to tap, so a
   sticky close bar pinned to the top of the menu is the way out. */
.dd-close { display: none; }
@media (max-width: 700px) {
  .dd-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: -6px;                        /* cancel the .dropdown's 6px padding */
    margin: -6px -6px 6px -6px;       /* full-bleed across that padding */
    padding: 13px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
    z-index: 3;
  }
  .dd-close .dd-x { font-size: 20px; line-height: 1; color: var(--text-dim); }
  .dd-close:active { background: #2a2e39; }
}

/* Group headings in an indicator's advanced settings mirror the Pine input groups. */
.dropdown .ind-subs .ind-param-group {
  margin: 10px 0 4px; padding: 7px 0 4px;
  border-top: 1px solid var(--border); color: var(--text-dim);
  font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.dropdown .ind-subs .ind-param-group:first-child { margin-top: 3px; border-top: 0; }

/* A support e-mail should read as a quiet detail, not as a primary action. */
.plans .plans-community { margin-top: 10px; }
.plans .plans-community a { color: #8fb0ff; font-weight: 700; text-decoration: none; }
.plans .plans-community a:hover { color: #c8d8ff; text-decoration: underline; }
.plans a[href^="mailto:"] { color: #98a6bb; }
.plans a[href^="mailto:"]:hover { color: #c0cad9; }

/* Before payment processing is enabled, paid tiers remain visible as a clear
   roadmap but never present a control that looks like a working checkout. */
.plans .beta-notice { margin: 0 0 20px; padding: 13px 15px; border: 1px solid #3679b8; border-radius: 9px; background: linear-gradient(100deg, rgba(41,98,255,.16), rgba(34,211,182,.08)); color: #c9d9ee; font-size: 13px; line-height: 1.55; }
.plans .beta-notice strong { color: #fff; }
.plans .checkout-btn.beta-disabled, .plans .checkout-btn.beta-disabled:hover { cursor: not-allowed; filter: none; background: #303949; border-color: #455269; color: #aebad0; box-shadow: none; }
.plans .period:disabled { cursor: default; opacity: .62; }