* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--surface-0); color: var(--text); font-family: var(--font); font-size: var(--fs-3); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } /* dvh: phone browser bars no longer clip the bottom */

#topbar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px 12px; background: var(--surface-1); border-bottom: 1px solid var(--border-strong);
}
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.topbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.symbol-picker { position: relative; }
.symbol-picker-btn {
  display: flex; align-items: center; gap: 8px; background: var(--surface-0); border: 1px solid var(--border-strong);
  color: var(--text); padding: 5px 9px 5px 6px; border-radius: var(--r-2); font-size: var(--fs-3); cursor: pointer; min-width: 140px;
  transition: background .12s ease, border-color .12s ease;
}
.symbol-picker-btn:hover, .symbol-picker-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-strong); }
.sp-btn-symbol { font-weight: 700; letter-spacing: .01em; }
.sp-chev { color: var(--text-2); margin-left: auto; transition: transform .15s ease; }
.symbol-picker-btn[aria-expanded="true"] .sp-chev { transform: rotate(180deg); }
.symbol-picker-broker {
  font-size: var(--fs-1); color: var(--text-2); background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--r-1);
  padding: 1px 5px; text-transform: uppercase; letter-spacing: .04em;
}
.sp-ava {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-1); font-weight: 800; color: var(--on-accent); letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.sp-ava-sm { width: 22px; height: 22px; font-size: var(--fs-1); }
.sp-ava.has-icon { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.sp-ico { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

.symbol-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; width: 392px; max-width: calc(100vw - 24px); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--r-3); z-index: 30; padding: 10px; overflow: hidden;
  box-shadow: var(--shadow-float); transform-origin: top left; animation: sp-in .14s ease-out;
}
@keyframes sp-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.symbol-picker-panel.hidden { display: none; }
.sp-search {
  display: flex; align-items: center; gap: 9px; padding: 0 10px; background: var(--surface-0); border: 1px solid var(--border-strong);
  border-radius: var(--r-2); color: var(--text-2); transition: border-color .12s, box-shadow .12s;
}
.sp-search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); color: var(--text); }
.symbol-picker-panel .sp-search input {
  flex: 1; min-width: 0; width: auto; background: transparent; border: none; outline: none; box-shadow: none; color: var(--text);
  padding: 10px 0; margin: 0; border-radius: 0; font-size: var(--fs-3);
}
.sp-search kbd {
  font: 600 var(--fs-1)/1 var(--font); color: var(--text-2); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: var(--r-1); padding: 3px 5px; background: var(--surface-1);
}
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 8px; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chip {
  flex-shrink: 0; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); border-radius: var(--r-pill);
  padding: 4px 11px; font-size: var(--fs-1); font-weight: 600; cursor: pointer; transition: all .12s ease;
}
.sp-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.sp-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sp-chip.fav.active { background: var(--warning); border-color: var(--warning); color: var(--on-warning); }

.symbol-picker-list { max-height: 340px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.sp-sec { padding: 10px 8px 4px; font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-2); }
.symbol-picker-row {
  display: flex; align-items: center; padding: 6px 8px; border-radius: var(--r-2); cursor: pointer; gap: 11px; position: relative;
  transition: background .08s ease;
}
.symbol-picker-row:hover, .symbol-picker-row.is-active { background: var(--surface-3); }
.symbol-picker-row.is-active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); }
.sp-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sp-name b { font-size: var(--fs-3); font-weight: 700; color: var(--text); }
.sp-name i { font-style: normal; font-size: var(--fs-1); color: var(--text-2); }
.sp-name mark { background: none; color: var(--accent-text); }
.sp-current { color: var(--success); display: inline-flex; }
.sp-star {
  border: none; background: none; padding: 4px; border-radius: var(--r-2); cursor: pointer; color: var(--text-3); display: inline-flex;
  opacity: 0; transition: opacity .1s, color .1s, transform .1s;
}
.symbol-picker-row:hover .sp-star, .symbol-picker-row.is-active .sp-star, .sp-star.on { opacity: 1; }
.sp-star:hover { color: var(--warning); transform: scale(1.15); background: none; }
.sp-star.on { color: var(--warning); }
.sp-empty { padding: 26px 8px; text-align: center; color: var(--text-2); font-size: var(--fs-2); }
.sp-footer {
  display: flex; justify-content: space-between; gap: 8px; margin: 8px -10px -10px; padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: var(--fs-1); color: var(--text-2); background: var(--surface-0);
}

.btn-group { display: flex; gap: 4px; }
.btn-group.seg { gap: 0; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--r-2); padding: 2px; }
.btn-group.seg button { background: transparent; border-color: transparent; padding: 4px 10px; border-radius: var(--r-1); }
.btn-group.seg button:hover { background: var(--surface-3); }
.btn-group.seg button.active { background: var(--accent); box-shadow: none; }

/* ---- timeframe selector: flat segmented control, a solid highlight slides to the active button (position set from main.js via --tf-x / --tf-w) ---- */
.btn-group.seg.tf-seg { position: relative; gap: 0; padding: 2px; border-radius: var(--r-2); background: var(--surface-0); border: 1px solid var(--border-strong); }
.tf-seg::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; width: var(--tf-w, 0px); border-radius: var(--r-2); z-index: 0; opacity: 0;
  transform: translateX(var(--tf-x, 0px)); background: var(--accent);
}
.tf-seg.ready::before { opacity: 1; transition: transform .2s cubic-bezier(.4, 0, .2, 1), width .2s cubic-bezier(.4, 0, .2, 1); }
.btn-group.seg.tf-seg button {
  position: relative; z-index: 1; min-width: 40px; height: 28px; padding: 0 11px; border: none; border-radius: var(--r-2); background: transparent !important;
  box-shadow: none !important; color: var(--text-2); font-size: var(--fs-3); font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center; transition: color .15s ease;
}
.btn-group.seg.tf-seg button:hover { color: var(--text); }
.btn-group.seg.tf-seg button.active { color: var(--on-accent); }
.btn-group.seg.tf-seg button.tf-plus { min-width: 28px; padding: 0 8px; font-size: var(--fs-5); font-weight: var(--fw-regular); color: var(--text-3); }
.btn-group.seg.tf-seg button.tf-plus:hover, .btn-group.seg.tf-seg button.tf-plus[aria-expanded="true"] { color: var(--accent-text); }
/* custom timeframe panel: fixed under the bar (the bar's own container scrolls on narrow windows and would clip it) */
.tf-panel {
  position: fixed; z-index: 40; width: 284px; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-2); box-shadow: var(--shadow-float); font-family: var(--font);
}
.tf-panel.hidden { display: none; }
.tf-title { font-size: var(--fs-3); font-weight: var(--fw-semibold); color: var(--text); }
.tf-sub { margin-top: var(--s-1); font-size: var(--fs-1); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.tf-row { display: flex; gap: var(--s-2); }
.tf-num, .tf-unit { height: 34px; background-color: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-1); font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.tf-num { width: 72px; padding: 0 var(--s-2); text-align: right; }
.tf-unit { flex: 1; min-width: 0; padding-left: var(--s-3); }
.tf-num:focus, .tf-unit:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.tf-add { height: 34px; padding: 0 var(--s-4); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: var(--r-1); font-size: var(--fs-3); font-weight: var(--fw-semibold); cursor: pointer; }
.tf-add:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.tf-chips, .tf-saved { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.tf-saved { flex-direction: column; align-items: flex-start; }
.tf-chip, .tf-saved-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--s-3); border: 1px solid var(--border-strong); background: var(--surface-0); color: var(--text-2); border-radius: var(--r-1); font-size: var(--fs-2); font-variant-numeric: tabular-nums; cursor: pointer; }
.tf-chip:hover { color: var(--text); border-color: var(--text-4); }
.tf-saved-chip { cursor: default; gap: var(--s-2); margin-right: var(--s-1); }
.tf-saved { flex-direction: row; flex-wrap: wrap; }
.tf-saved .tf-sub { flex: 1 1 100%; }
.tf-remove { border: 0; background: transparent; color: var(--text-3); font-size: var(--fs-4); line-height: 1; padding: 0; cursor: pointer; }
.tf-remove:hover { color: var(--danger-text); }
.tf-msg { min-height: 0; font-size: var(--fs-2); color: var(--danger-text); }
.tf-msg:empty { display: none; }

/* a slim sweep along the top of the chart while a new market / timeframe loads (toggled from main.js); one transform-only animation */
#chartArea.loading::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 8; width: 35%; height: 2px; pointer-events: none; will-change: transform;
  background: var(--accent); animation: chart-sweep 1s ease-in-out infinite;
}
@keyframes chart-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
/* Switching market / timeframe: the chart dims while the new candles load and fades back in, and the overlay (signals, levels, tags) fades in after
   it. Opacity only, so the GPU does the work and nothing is re-laid-out. */
#chartContainer, #overlayCanvas { transition: opacity .3s ease; }
#chartArea.loading #chartContainer { opacity: .4; }
#chartArea.loading #overlayCanvas { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #chartArea.loading::before { animation: none; }
  #chartContainer, #overlayCanvas { transition: none; }
}

.topbar-sep { width: 1px; height: 20px; background: var(--surface-4); margin: 0 4px; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent;
  color: var(--text-2); padding: 6px 10px; border-radius: var(--r-2); font-size: var(--fs-2); cursor: pointer; list-style: none;
}
.tb-btn::-webkit-details-marker { display: none; }
a.tb-btn { text-decoration: none; }
a.tb-btn:hover { color: var(--text); }
.tb-btn:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
button.tb-btn.active { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); box-shadow: none; }
.ic { flex-shrink: 0; }
.nav-menu { position: relative; z-index: 31; }
.nav-menu[open] > summary { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 4px); width: 210px; background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-2); box-shadow: var(--shadow-float); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.nav-menu-panel a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-2); color: var(--text);
  text-decoration: none; font-size: var(--fs-2);
}
.nav-menu-panel a:hover { background: var(--surface-3); color: var(--text); }
.nav-menu-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 8px 6px 2px; border-top: 1px solid var(--border-strong); }
.nav-menu-user #whoami { color: var(--text-2); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button {
  background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 10px;
  border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-2);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
button:hover { background: var(--surface-3); border-color: var(--border-strong); }
button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.tool { width: 30px; padding: 6px 0; text-align: center; }

#chartArea { position: relative; flex: 1; min-height: 0; overflow: hidden; } /* clips the side panels while they slide in, so the page never gains a horizontal scrollbar */
#chartContainer { position: absolute; inset: 0; }
#overlayCanvas { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#overlayCanvas.drawing-active { pointer-events: auto; cursor: crosshair; }

.scroll-latest {
  position: absolute; right: 84px; bottom: 68px; z-index: 7; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: color-mix(in srgb, var(--surface-3) 95%, transparent); border: 1px solid var(--border-strong); color: var(--text); box-shadow: none;
}
.scroll-latest:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.scroll-latest.hidden { display: none; }

#statusBar {
  position: absolute; left: 8px; bottom: 6px; display: flex; gap: 14px; align-items: center;
  background: color-mix(in srgb, var(--surface-1) 75%, transparent); padding: 4px 10px; border-radius: var(--r-1); font-size: var(--fs-1); color: var(--text-2);
  pointer-events: none;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-off { background: var(--text-3); }
.dot-on { background: var(--success); }

.clock-widget { position: relative; z-index: 6; }
.clock-btn {
  display: flex; align-items: baseline; gap: 6px; background: var(--surface-3); border: 1px solid var(--border-strong);
  color: var(--text); padding: 6px 10px; border-radius: var(--r-2); font-size: var(--fs-2); cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.clock-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
#clockTime { font-variant-numeric: tabular-nums; font-weight: 600; }
.clock-tz-label { font-size: var(--fs-1); color: var(--text-2); white-space: nowrap; }
.clock-tz-panel {
  position: absolute; top: calc(100% + 4px); right: 0; width: 240px; background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--r-2); box-shadow: var(--shadow-float); z-index: 30; padding: 8px;
}
.clock-tz-panel.hidden { display: none; }
.clock-tz-panel input {
  width: 100%; background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 8px;
  border-radius: var(--r-1); font-size: var(--fs-3); margin-bottom: 6px;
}
.clock-tz-list { max-height: 260px; overflow-y: auto; }
.clock-tz-row {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: var(--r-1);
  cursor: pointer; font-size: var(--fs-2); gap: 8px;
}
.clock-tz-row:hover { background: var(--surface-3); }
.clock-tz-row.active { background: var(--accent-soft); }
.clock-tz-offset { font-size: var(--fs-1); color: var(--text-2); font-variant-numeric: tabular-nums; }

.side-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: 320px; background: var(--surface-1);
  border-left: 1px solid var(--border-strong); overflow-y: auto; z-index: 20; box-shadow: var(--shadow-float);
}
.side-panel.hidden { display: none; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; z-index: 3; background: var(--surface-1); }
.panel-header h3 { margin: 0; font-size: var(--fs-4); }
.closeBtn { border: none; background: none; font-size: var(--fs-4); padding: 2px 6px; }
.panel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-body h4 { margin: 14px 0 4px; font-size: var(--fs-2); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }

.group-title { font-weight: 600; color: var(--text); margin-top: 8px; font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .04em; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.opt-row label { flex: 1; }
.script-inputs { border-left: 2px solid var(--border-strong); padding-left: 8px; margin: 4px 0 6px; }
.subgroup-title { color: var(--text-2); font-size: var(--fs-1); margin-top: 6px; }
.opt-row select, .opt-row input[type="text"] { max-width: 150px; background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); padding: 3px 6px; border-radius: 3px; }
.opt-row input[type="number"] { width: 70px; background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); padding: 3px 6px; border-radius: 3px; }
.opt-row input[type="color"] { width: 32px; height: 22px; padding: 0; border: none; background: none; }

.hint { color: var(--text-2); font-size: var(--fs-1); line-height: 1.5; }

.watch-row, .alert-row { border: 1px solid var(--border-strong); border-radius: var(--r-1); padding: 8px 10px; margin-bottom: 6px; }
.watch-row { display: flex; align-items: center; justify-content: space-between; }

.add-watch-form { display: flex; gap: 6px; margin-bottom: 6px; }
.add-watch-form select, .add-watch-form input {
  background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 8px;
  border-radius: var(--r-1); font-size: var(--fs-2);
}
.add-watch-form input { flex: 1; min-width: 0; }
.add-watch-form select { flex-shrink: 0; }
.alert-row .alert-title { font-weight: 600; }
.alert-row .alert-meta { color: var(--text-2); font-size: var(--fs-1); margin-top: 2px; }
.alert-row .alert-detail { color: var(--text-2); font-size: var(--fs-1); margin-top: 3px; white-space: pre-line; }
.small-x { background: none; border: none; color: var(--danger-text); cursor: pointer; font-size: var(--fs-2); }

#drawToolbar { padding: 2px 6px; background: var(--surface-0); border-radius: var(--r-2); border: 1px solid var(--border-strong); }
#drawToolbar.hidden { display: none; }


.nav-link {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface-3); border: 1px solid var(--border-strong);
  color: var(--text); padding: 6px 12px; border-radius: var(--r-2); font-size: var(--fs-2); text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nav-link:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
#whoami { color: var(--text-2); font-size: var(--fs-1); }

/* ---- login page: Swiss, a flat left-aligned block (see .claude/DESIGN-SYSTEM.md) ---- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--surface-0); padding: var(--s-5); }
.auth-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-5); border-top: 2px solid var(--accent); }
.auth-card h1 { margin: 0; font-size: var(--fs-7); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text); }
.auth-card .hint { margin: calc(var(--s-3) * -1) 0 var(--s-2); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.auth-card label { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-1); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.auth-card input, .auth-card button { font-family: inherit; }
.auth-card input {
  background: var(--surface-1); border: 1px solid var(--border-strong); color: var(--text); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1); font-size: var(--fs-3); min-height: 36px; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular);
}
.auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.auth-card button {
  margin-top: var(--s-2); min-height: 36px; background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); padding: 0 var(--s-4);
  border-radius: var(--r-1); font-size: var(--fs-3); font-weight: var(--fw-semibold); cursor: pointer; transition: background .12s;
}
.auth-card button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.auth-error { color: var(--danger-text); font-size: var(--fs-2); }
.auth-card.hidden, .auth-error.hidden { display: none; }
.auth-card .auth-link { background: transparent; border-color: transparent; color: var(--text-2); }
.auth-card .auth-link:hover { background: transparent; border-color: transparent; color: var(--text); text-decoration: underline; }

/* ---- settings page ---- */
/* html/body are pinned to height:100% globally (the chart page fills the screen exactly,
   by design) — that clamp also swallows any bottom padding here once content overflows
   past one viewport, since the padding then sits inside the clamped box instead of after
   the real (scrolled) end of the content. min-height + auto height lets these pages grow
   past 100vh instead, so the bottom padding actually lands after the last card. */
.settings-body { max-width: 960px; margin: 0 auto; min-height: 100vh; height: auto; padding: 0 0 60px; }
.backLink {
  color: var(--text-2); text-decoration: none; font-size: var(--fs-2); margin-right: 4px; padding: 5px 9px;
  border-radius: var(--r-2); transition: background .12s ease, color .12s ease;
}
.backLink:hover { color: var(--text); background: var(--surface-3); }

/* live bot state — the single most important thing on the page, so it sits above
   everything else, full width, impossible to miss */
.bot-status-banner {
  max-width: 960px; margin: 0 auto; padding: 10px 16px; font-size: var(--fs-2); font-weight: 600;
  letter-spacing: .01em; text-align: center;
}
.bot-status-banner.status-off { background: var(--surface-3); color: var(--text-2); }
.bot-status-banner.status-live { background: var(--success-soft); color: var(--success-text); }




.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.settings-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-2); color: var(--text-2); font-weight: 500; }
.settings-field.hidden { display: none; }

.field-label-row { display: inline-flex; align-items: center; }
.field-info-btn {
  background: none; border: none; color: var(--text-3); padding: 0; margin-left: 3px; font-size: var(--fs-2);
  cursor: pointer; line-height: 1; vertical-align: middle;
}
.field-info-btn:hover { color: var(--text-2); background: none; }
.field-info-popover {
  position: absolute; max-width: 320px; background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-2); box-shadow: var(--shadow-float); padding: 10px 12px;
  font-size: var(--fs-2); line-height: 1.5; color: var(--text); z-index: 40;
}
.field-info-popover.hidden { display: none; }
.settings-field input, .settings-field select {
  background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); padding: 8px 10px;
  border-radius: var(--r-2); font-size: var(--fs-3); transition: border-color .12s ease, box-shadow .12s ease;
}
.settings-field input:focus, .settings-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}

/* boolean fields render as a proper toggle switch, not a bare checkbox */
.checkbox-field { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
.checkbox-field input {
  appearance: none; -webkit-appearance: none; width: 38px; height: 21px; border-radius: var(--r-pill);
  background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; cursor: pointer;
  flex-shrink: 0; transition: background .15s ease, border-color .15s ease;
}
.checkbox-field input::before {
  content: ""; position: absolute; top: 1px; left: 1px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--text-2); transition: transform .15s ease, background .15s ease;
}
.checkbox-field input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox-field input:checked::before { background: var(--on-accent); transform: translateX(17px); }

.sizing-toggle { display: flex; gap: 6px; }
.sizing-toggle-mode { flex: 0 0 auto; max-width: 55%; }
.sizing-toggle-value { flex: 1; min-width: 0; }

.select-other { display: flex; flex-direction: column; gap: 6px; }
.select-other-input.hidden { display: none; }

.multi-select { display: flex; flex-direction: column; gap: 8px; }
.multi-select-list {
  display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 160px; overflow-y: auto;
  padding: 8px 10px; background: var(--surface-0); border: 1px solid var(--border-strong); border-radius: var(--r-2);
}
.multi-select-option { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text); font-weight: 400; cursor: pointer; }
/* Reset back to a plain native checkbox — without this it would otherwise inherit the
   generic .settings-field input styling above (background/border/padding meant for text
   inputs) and render as an oversized, broken-looking box instead of a normal checkbox. */
.multi-select-checkbox { all: revert; cursor: pointer; }

.limit-input-row { display: flex; gap: 6px; }
.limit-input-row input[type="number"] { flex: 1; min-width: 0; }
.unit-toggle { display: flex; border: 1px solid var(--border-strong); border-radius: var(--r-2); overflow: hidden; flex-shrink: 0; }
.unit-toggle .unit-btn {
  border: none; border-radius: 0; padding: 7px 11px; font-size: var(--fs-3); background: var(--surface-0); color: var(--text-2);
  transition: background .12s ease, color .12s ease;
}
.unit-toggle .unit-btn:first-child { border-right: 1px solid var(--border-strong); }
.unit-toggle .unit-btn.active { background: var(--accent); color: var(--on-accent); }

.telegram-code { font-variant-numeric: tabular-nums; font-size: var(--fs-3); color: var(--text); }

.user-row-wrap { border-bottom: 1px solid var(--border); }
.user-row-wrap:last-child { border-bottom: none; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.user-row .user-name { flex: 1; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.user-row .user-name::before {
  content: attr(data-initial); width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); color: var(--text); font-size: var(--fs-2); font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.user-row select {
  background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); padding: 5px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.user-code { font-variant-numeric: tabular-nums; white-space: nowrap; }
.user-copycode.hidden { display: none; }

/* ---- profit calendar ---- */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-header h2 { margin: 0; font-size: var(--fs-5); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { min-width: 30px; }

.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 6px; }
.cal-weekday { text-align: center; font-size: var(--fs-1); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-day {
  aspect-ratio: 1 / 0.85; border-radius: var(--r-2); padding: 8px; background: var(--surface-0); border: 1px solid var(--border-strong);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal-day-num { font-size: var(--fs-1); color: var(--text-2); }
.cal-day-muted { opacity: 0.35; }
.cal-day-today { border-color: var(--accent); }
.cal-day-win { background: var(--success-soft); border-color: var(--success-border); }
.cal-day-loss { background: var(--danger-soft); border-color: var(--danger-border); }
.cal-day-pnl { font-size: var(--fs-3); font-weight: 600; }
.cal-day-win .cal-day-pnl { color: var(--success-text); }
.cal-day-loss .cal-day-pnl { color: var(--danger-text); }
.cal-day-trades { font-size: var(--fs-1); color: var(--text-2); }
.cal-day-notrades { font-size: var(--fs-1); color: var(--text-4); margin-top: 4px; }
.cal-day-clickable { cursor: pointer; }
.cal-day-clickable:hover { border-color: var(--accent); }

.cal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 20px 0; }
.cal-stat-card {
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-3); padding: 18px 20px; box-shadow: none;
}
.cal-stat-label { font-size: var(--fs-2); color: var(--text-2); margin-bottom: 8px; }
.cal-stat-value { font-size: var(--fs-7); font-weight: 700; }
.cal-stat-value.positive { color: var(--success-text); }
.cal-stat-value.negative { color: var(--danger-text); }
.cal-stat-sub { font-size: var(--fs-1); color: var(--text-2); margin-top: 4px; }


/* ---- status / ops / risk page ---- */

.error-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-strong); font-size: var(--fs-2); }
.error-row:last-child { border-bottom: none; }
.error-row-time { color: var(--text-2); white-space: nowrap; flex-shrink: 0; }
.error-row-msg { color: var(--danger-text); }

/* ---- backtest page ---- */

.day-detail-overlay {
  position: fixed; inset: 0; background: var(--scrim); z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.day-detail-overlay.hidden { display: none; }
.day-detail-panel {
  width: min(560px, 92vw); max-height: 80vh; overflow-y: auto; background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--r-2); box-shadow: var(--shadow-float);
}
.trade-row { border-bottom: 1px solid var(--border-strong); padding: 10px 14px; }
.trade-row:last-child { border-bottom: none; }
.trade-row-main { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); }
.trade-row-symbol { font-weight: 600; }
.trade-row-time { color: var(--text-2); font-size: var(--fs-1); }
.trade-row-pnl { margin-left: auto; font-weight: 700; }
.trade-row-pnl.positive { color: var(--success-text); }
.trade-row-pnl.negative { color: var(--danger-text); }
.trade-row-sub { color: var(--text-2); font-size: var(--fs-1); margin-top: 3px; }

.mt5-limit-banner {
  background: var(--warning-soft); border-bottom: 1px solid var(--warning-border); color: var(--warning-text);
  padding: 7px 14px; font-size: var(--fs-2); display: flex; align-items: center; gap: 8px;
}
.mt5-limit-banner.hidden { display: none; }
.mt5-limit-banner::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }

/* ---- bar replay ---- */
.replay-bar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border: 1px solid var(--accent-border); border-radius: var(--r-2); padding: 7px 12px; box-shadow: var(--shadow-float);
}
.replay-bar.hidden { display: none; }
.replay-status-text { font-size: var(--fs-2); color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.replay-controls { display: flex; align-items: center; gap: 6px; }
.replay-controls.hidden { display: none; }
#replaySpeedBtn { min-width: 34px; }
#replayExitBtn { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
#replayExitBtn:hover { background: var(--accent-soft); border-color: var(--accent-border); }

/* Symbol picker (multi-select): chips for what's selected, a search box, and a scrollable option list. */
.multi-select { gap: 10px; }
.ms-head { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.ms-count { font-size: var(--fs-2); color: var(--text-2); font-weight: 500; }
.ms-clear { all: unset; font-size: var(--fs-2); color: var(--accent-text); cursor: pointer; padding: 2px 6px; border-radius: var(--r-1); }
.ms-clear:hover { background: var(--surface-3); }
.ms-clear[hidden], .ms-chips[hidden], .ms-opt[hidden], .ms-empty[hidden] { display: none; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; font-size: var(--fs-2); font-weight: 600;
  color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--r-pill);
}
.ms-chip-x { all: unset; cursor: pointer; width: 18px; height: 18px; line-height: 17px; text-align: center; border-radius: 50%; color: var(--accent-text); font-size: var(--fs-4); }
.ms-chip-x:hover { background: var(--accent-strong); color: var(--on-accent); }
.ms-filter {
  width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: var(--fs-3); background: var(--surface-0); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-2);
}
.ms-filter:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ms-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; max-height: 220px; overflow-y: auto;
  padding: 6px; background: var(--surface-0); border: 1px solid var(--border-strong); border-radius: var(--r-2);
}
.ms-opt {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: var(--fs-2);
  color: var(--text); border-radius: var(--r-2); cursor: pointer; border: 1px solid transparent;
}
.ms-opt:hover, .ms-opt:focus-visible { background: var(--surface-2); }
.ms-opt:focus-visible { border-color: var(--accent); }
.ms-opt.selected { color: var(--text); background: var(--accent-soft); border-color: var(--accent-border); }
.ms-tick { width: 14px; height: 14px; flex: none; border: 1.5px solid var(--border-strong); border-radius: var(--r-1); position: relative; }
.ms-opt.selected .ms-tick { background: var(--accent); border-color: var(--accent); }
.ms-opt.selected .ms-tick::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3px; height: 7px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ms-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-empty { grid-column: 1 / -1; padding: 10px; font-size: var(--fs-2); color: var(--text-2); text-align: center; }
.ms-add { all: unset; cursor: pointer; padding: 6px 12px; font-size: var(--fs-2); font-weight: 600; color: var(--accent-text); border: 1px dashed var(--accent-border); border-radius: var(--r-2); }
.ms-add:hover { background: var(--accent-soft); }

/* Chart-page menu items (search palette / theme toggle). */
.nav-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-2);
  background: transparent; border: none; color: var(--text); font-size: var(--fs-2); text-align: left; cursor: pointer;
}
.nav-menu-item:hover { background: var(--surface-3); color: var(--text); }
.nav-menu-item kbd {
  font: 600 var(--fs-1)/1 inherit; font-family: inherit; padding: 3px 6px; border-radius: var(--r-1); background: var(--surface-3);
  border: 1px solid var(--border-strong); color: var(--text-2);
}

/* ---- mid widths (761-1500 px): the tools shrink to icons, and the one that is open keeps its name, so the header stays on one row instead of wrapping ---- */
@media (min-width: 761px) and (max-width: 1500px) {
  #topbar .tb-btn > span { display: none; }
  #topbar .tb-btn.active > span { display: inline; }
  #topbar .topbar-row > .topbar-group:not(:first-child) .tb-btn > span { display: none; }
  #topbar .tb-btn:not(.tb-icon) { padding: 7px 9px; }
}
/* ---- narrower than the full header (about 1250 px): one row, the symbol, timeframes and tools scroll sideways, the right-hand controls stay put ---- */
@media (max-width: 1260px) {
  #topbar .topbar-row { flex-wrap: nowrap; gap: 6px; }
  #topbar .topbar-row > .topbar-group:first-child { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #topbar .topbar-row > .topbar-group:first-child::-webkit-scrollbar { display: none; }
  #topbar .topbar-group > * { flex: 0 0 auto; }
  #topbar .topbar-row > .topbar-group:last-child { flex-wrap: nowrap; margin-left: 0; gap: 4px; }
  /* A scrolling container clips absolute dropdowns, so this one is fixed under the header. */
  .symbol-picker-panel { position: fixed; top: 52px; }
}

/* ---- phones / small tablets: chart page ---- */
@media (max-width: 760px) {
  #topbar { padding: 6px 8px; }
  /* No sideways scrolling on a phone: the symbol, timeframes and tools wrap onto a second row under the symbol and the right-hand controls. */
  #topbar .topbar-row { flex-wrap: wrap; justify-content: flex-start; }
  #topbar .topbar-row > .topbar-group:first-child { display: contents; }
  #topbar .topbar-row > .topbar-group:first-child > :not(:first-child) { order: 2; }
  #topbar .topbar-row > .topbar-group:last-child { order: 1; margin-left: auto; }
  #fullscreenBtn { display: none; }
  .symbol-picker-panel { left: 8px; right: 8px; width: auto; max-width: none; }
  #topbar .tb-btn span { display: none; }
  #topbar .tb-btn { padding: 7px 9px; }
  .topbar-sep { display: none; }
  .symbol-picker-btn { min-width: 0; white-space: nowrap; }
  .clock-tz-label { display: none; }
  #drawToolbar { flex-wrap: wrap; }
  .side-panel { width: 100%; }
  .nav-menu-panel { width: min(260px, calc(100vw - 24px)); }
  .scroll-latest { right: 74px; bottom: 72px; }
  #statusBar { max-width: calc(100% - 16px); flex-wrap: wrap; gap: 6px 12px; }
}

/* ---- indicator legend (chart top-left) and the settings-panel indicator list ---- */
/* OHLC readout of the bar under the crosshair (newest bar when off the chart) */
/* OHLC readout and indicator legend share one row, legend first (wrapping to the next line when narrow) so they never overlap. */
.chart-tl { position: absolute; left: 8px; top: 8px; z-index: 6; display: flex; flex-flow: row wrap; align-items: flex-start; gap: 4px 12px; max-width: calc(100% - 100px); pointer-events: none; }
.ohlc-bar { display: flex; flex-wrap: wrap; align-items: center; align-content: center; min-height: 25px; gap: 2px 10px; pointer-events: none; font: var(--fs-2)/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--text); }
.ohlc-bar.hidden { display: none; }
.ohlc-bar .ohlc-k { opacity: .6; margin-right: 3px; }
.ohlc-bar.up .ohlc-v { color: var(--success); }
.ohlc-bar.down .ohlc-v { color: var(--danger); }
body.embed .chart-tl { top: 34px; }
/* keep the header on one row on mid-width windows */
@media (max-width: 1500px) { #topbar .clock-tz-label { display: none; } }
@media (max-width: 520px) { #topbar .clock-widget, #topbar .symbol-picker-broker { display: none; } }
/* ---- focus mode: only the chart (no header / banner); a small button or Esc brings the header back ---- */
body.focus #topbar, body.focus #mt5LimitBanner { display: none !important; }
#fullscreenBtn.holding { background: color-mix(in srgb, var(--accent) 28%, transparent); transform: scale(1.12); transition: transform .6s linear, background .6s linear; }
/* Exit pill: slides down from the top edge when the pointer goes there (and for a moment when entering) */
.focus-exit {
  display: none; position: absolute; left: 50%; top: 12px; z-index: 9; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface-1) 82%, transparent); color: var(--text); font: 500 var(--fs-2)/1 inherit; cursor: pointer; box-shadow: var(--shadow-float);
  transform: translate(-50%, -160%); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease, background .15s ease, border-color .15s ease;
}
.focus-exit kbd { padding: 2px 6px; border-radius: var(--r-1); border: 1px solid var(--border-strong); background: var(--surface-3); font: 600 var(--fs-1)/1 inherit; letter-spacing: .4px; color: var(--text-2); }
.focus-exit:hover { background: color-mix(in srgb, var(--accent) 35%, var(--surface-1)); border-color: var(--accent); }
.focus-exit:active { transform: translate(-50%, 0) scale(.96); }
body.focus .focus-exit { display: inline-flex; }
body.focus .focus-exit.show, body.focus .focus-exit:focus-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .focus-exit { transition: opacity .2s ease; } }
.ind-legend { order: -1; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.ind-legend.hidden { display: none; }
/* legend fold: a header chip that collapses the rows into a strip of mini badges */
.ind-head {
  pointer-events: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill);
  font: 700 var(--fs-1)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
  background: var(--surface-1); border: 1px solid var(--border); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.ind-head:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.ind-chev { display: inline-flex; transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.ind-legend.collapsed .ind-chev { transform: rotate(-90deg); }
.ind-count { min-width: 16px; padding: 2px 5px; border-radius: var(--r-pill); text-align: center; font-size: var(--fs-1); color: var(--on-accent); background: var(--accent); letter-spacing: 0; }
.ind-minis { display: none; align-items: center; gap: 4px; margin-left: 1px; }
.ind-legend.collapsed .ind-minis { display: inline-flex; }
.ind-legend.collapsed .ind-head-label { display: none; }
.ind-mini { width: 17px !important; height: 17px !important; border-radius: var(--r-1) !important; font-size: var(--fs-1) !important; position: relative; }
.ind-mini.busy { animation: ind-pulse 1s infinite; }
.ind-mini.is-off { opacity: .45; }
.ind-mini.err { box-shadow: 0 0 0 2px var(--danger); }
.ind-rows { width: 0; min-width: 100%; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }
.ind-rows-inner { width: max-content; overflow-x: visible; overflow-y: clip; display: flex; flex-direction: column; gap: 3px; min-height: 0; padding-top: 3px; }
.ind-legend.collapsed .ind-rows { grid-template-rows: 0fr; opacity: 0; }
.ind-legend.collapsed .ind-rows-inner { padding-top: 0; }
.ind-row {
  pointer-events: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 5px; border-radius: var(--r-2);
  font-size: var(--fs-2); color: var(--text); background: var(--surface-1); border: 1px solid var(--border);
  box-shadow: none; transition: border-color .12s, background .12s;
}
.ind-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ind-row.is-off .ind-name, .ind-row.is-off .ind-badge { opacity: .45; }
.ind-badge { opacity: .45; }
.ind-badge {
  width: 20px; height: 20px; border-radius: var(--r-2); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-1); font-weight: 800; color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ind-badge.strategy { background: var(--accent); }
.ind-badge.indicator { background: var(--surface-4); color: var(--text); }
.ind-name { font-weight: 650; font-size: var(--fs-2); color: var(--text); letter-spacing: .01em; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.ind-dot.ok { background: var(--success); box-shadow: none; }
.ind-dot.busy { background: var(--warning-text); box-shadow: none; animation: ind-pulse 1s infinite; }
.ind-dot.err { background: var(--danger); box-shadow: none; }
.ind-sig { font-size: var(--fs-1); font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: var(--r-1); line-height: 1.2; }
.ind-sig.buy { color: var(--success-text); background: var(--success-soft); }
.ind-sig.sell { color: var(--danger-text); background: var(--danger-soft); }
.ind-vals { display: inline-flex; gap: 7px; font-variant-numeric: tabular-nums; font-weight: 600; }
@keyframes ind-pulse { 50% { opacity: .35; } }
.ind-actions { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .12s; }
.ind-row:hover .ind-actions, .ind-row:focus-within .ind-actions, .ind-actions.on { opacity: 1; }
@media (hover: none) { .ind-actions { opacity: 1; } }
.ind-btn { width: 22px; height: 22px; padding: 0; border: none; border-radius: var(--r-1); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ind-btn:hover { background: var(--surface-3); color: var(--text); }

.ind-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ind-list .hint { margin: 0 0 2px; font-size: var(--fs-1); }
.ind-list .hint.err { color: var(--danger); }
.ind-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface-1); transition: border-color .12s, background .12s; }
.ind-item:hover { border-color: var(--border-strong); background: var(--surface-3); }
.ind-item.is-off .ind-avatar, .ind-item.is-off .ind-meta { opacity: .45; }
.ind-avatar { width: 30px; height: 30px; border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; font-size: var(--fs-3); font-weight: 700; color: var(--on-accent); flex-shrink: 0; }
.ind-avatar.strategy { background: var(--accent); }
.ind-avatar.indicator { background: var(--surface-4); color: var(--text); }
.ind-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ind-item-name { font-weight: 600; font-size: var(--fs-3); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-kind { font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ind-item .ind-btn { width: 26px; height: 26px; }
.ind-empty { padding: 10px; text-align: center; font-size: var(--fs-2); color: var(--text-2); border: 1px dashed var(--border-strong); border-radius: var(--r-2); }
.ind-add {
  width: 100%; background: transparent; border: 1px dashed var(--border-strong); color: var(--text-2); padding: 9px 10px; border-radius: var(--r-2);
  font-size: var(--fs-2); cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.ind-add:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.ind-add:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---- indicator panel: grouped cards with switch rows ---- */
#settingsPanel, #candlePanel { width: min(348px, 100vw); }
#settingsPanel .panel-header, #candlePanel .panel-header { padding: 14px 16px; }
#settingsPanel .panel-header h3, #candlePanel .panel-header h3 { font-size: var(--fs-5); font-weight: 700; letter-spacing: -.005em; }
#settingsPanel .closeBtn, #candlePanel .closeBtn { width: 28px; height: 28px; border-radius: var(--r-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#settingsPanel .closeBtn:hover, #candlePanel .closeBtn:hover { background: var(--surface-3); color: var(--text); }
#settingsPanel .panel-body, #candlePanel .panel-body { padding: 16px; gap: 18px; }
.set-section { display: flex; flex-direction: column; gap: 8px; }
.set-title { padding: 0 2px; font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.set-card { border: 1px solid var(--border-strong); border-radius: var(--r-3); background: var(--surface-0); overflow: hidden; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; cursor: pointer; transition: background .12s; }
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-row:hover { background: var(--surface-1); }
.set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-label { font-size: var(--fs-3); font-weight: 600; color: var(--text); }
.set-desc { font-size: var(--fs-1); line-height: 1.4; color: var(--text-2); }
.set-switch {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 36px; height: 20px; border-radius: var(--r-pill); margin: 0; position: relative; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--border-strong); transition: background .15s, border-color .15s;
}
.set-switch::before { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform .15s, background .15s; }
.set-switch:checked { background: var(--accent); border-color: var(--accent); }
.set-switch:checked::before { background: var(--on-accent); transform: translateX(16px); }
.set-switch:focus-visible, .set-num:focus { outline: none; box-shadow: var(--focus-ring); }
.set-num { flex-shrink: 0; width: 64px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; background: var(--surface-1); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-2); font-size: var(--fs-3); }
.set-num:focus { border-color: var(--accent); }

/* ---- per-indicator settings window (floating, draggable) ---- */
.sd-win {
  position: fixed; left: 50%; top: 9vh; transform: translateX(-50%); z-index: 900; width: min(580px, calc(100vw - 24px)); max-height: min(82vh, 720px);
  display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--r-3); overflow: hidden;
  box-shadow: var(--shadow-float); color: var(--text); animation: sd-in .16s ease-out;
}
@keyframes sd-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.985); } }

.sd-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px 20px; cursor: grab; user-select: none; }
.sd-head:active { cursor: grabbing; }
.sd-avatar { width: 40px; height: 40px; border-radius: var(--r-3); display: flex; align-items: center; justify-content: center; font-size: var(--fs-5); font-weight: 700; color: var(--on-accent); flex-shrink: 0; }
.sd-avatar.strategy { background: var(--accent); }
.sd-avatar.indicator { background: var(--surface-4); color: var(--text); }
.sd-ident { flex: 1; min-width: 0; }
.sd-title { margin: 0; font-size: var(--fs-5); font-weight: 700; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-sub { margin-top: 2px; font-size: var(--fs-2); color: var(--text-2); text-transform: capitalize; }
.sd-sub { text-transform: none; }
.sd-x { width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--r-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sd-x:hover { background: var(--surface-3); color: var(--text); }

.sd-bar { display: flex; align-items: center; gap: 12px; padding: 0 20px 14px; }
.sd-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-2); flex-shrink: 0; }
.sd-seg-btn { background: transparent; border: none; border-radius: var(--r-2); padding: 6px 16px; font-size: var(--fs-3); font-weight: 600; color: var(--text-2); cursor: pointer; }
.sd-seg-btn:hover { color: var(--text); background: transparent; }
.sd-seg-btn.active { background: var(--surface-1); color: var(--text); box-shadow: none; border: none; }
.sd-search { flex: 1; min-width: 0; height: 34px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-2); padding: 0 12px; color: var(--text); font-size: var(--fs-3); }
.sd-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.sd-search[hidden] { display: none; }

.sd-body { flex: 1; overflow-y: auto; padding: 4px 20px 16px; min-height: 160px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; }
.sd-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; flex-shrink: 0; }
.sd-card-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; background: transparent; border: none; border-radius: 0; color: var(--text); font-size: var(--fs-1); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-align: left; }
.sd-card-head:hover { background: transparent; }
.sd-card-head.static { cursor: default; }
.sd-card-head .sd-chev { color: var(--text-2); font-size: var(--fs-5); transition: transform .12s; transform: rotate(90deg); display: inline-block; width: 10px; }
.sd-card-head.collapsed .sd-chev { transform: none; }
.sd-card-count { margin-left: auto; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0; color: var(--text-2); background: var(--surface-0); border-radius: var(--r-pill); padding: 1px 8px; }
.sd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 4px 14px 16px; }
.sd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-left: 10px; border-left: 2px solid transparent; transition: border-color .12s; }
.sd-field.modified { border-left-color: var(--accent); }
.sd-field-wide { grid-column: 1 / -1; }
.sd-field-bool { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; grid-column: 1 / -1; padding-top: 2px; padding-bottom: 2px; }
.sd-field-bool .sd-field-top { flex: 1; }
.sd-field-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sd-label { flex: 1; min-width: 0; font-size: var(--fs-2); font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.sd-field-bool .sd-label { font-size: var(--fs-3); color: var(--text); white-space: normal; }
.sd-reset { width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--r-2); background: transparent; color: var(--accent); font-size: var(--fs-4); line-height: 1; cursor: pointer; flex-shrink: 0; }
.sd-reset:hover { background: var(--surface-3); }
.sd-control { width: 100%; height: 38px; background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-2); padding: 0 11px; font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.sd-control:hover { border-color: var(--border-strong); }
.sd-control:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

.sd-switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.sd-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sd-switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--border-strong); transition: background .15s; }
.sd-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-accent); box-shadow: none; transition: transform .15s; }
.sd-switch input:checked + span { background: var(--accent); }
.sd-switch input:checked + span::after { transform: translateX(16px); }
.sd-switch input:focus-visible + span { box-shadow: var(--focus-ring); }

.sd-style-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); }
.sd-style-row .sd-label { font-size: var(--fs-3); color: var(--text); }
.sd-swatch { width: 26px; height: 8px; border-radius: var(--r-1); flex-shrink: 0; border: 1px solid var(--border-strong); }
.sd-chip { font-size: var(--fs-1); font-weight: 600; color: var(--text-2); background: var(--surface-0); border-radius: var(--r-pill); padding: 2px 8px; }
.sd-link { background: none; border: none; padding: 2px 4px; font-size: var(--fs-2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; border-radius: var(--r-1); }
.sd-link:hover { background: none; text-decoration: underline; }
.sd-sep { color: var(--text-2); }
.sd-spacer { flex: 1; }
.sd-note { padding: 28px 0; text-align: center; color: var(--text-2); font-size: var(--fs-3); }
.sd-note.err { color: var(--danger); }

.sd-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-1); }
.sd-changes { font-size: var(--fs-2); color: var(--text-2); }
.sd-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text); height: 36px; padding: 0 18px; border-radius: var(--r-2); font-size: var(--fs-3); font-weight: 600; cursor: pointer; }
.sd-btn:hover { background: var(--surface-3); }
.sd-ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-ok:hover { background: var(--accent); filter: brightness(1.1); }
.sd-ok.dirty { box-shadow: none; }
@media (max-width: 520px) { .sd-grid { grid-template-columns: 1fr; } .sd-bar { flex-wrap: wrap; } .sd-search { flex-basis: 100%; } }

/* Settings window aligned with the design system: underline tabs, --r-2 cards, 36 px controls, shared button metrics, 4 px spacing steps. */
.sd-head { gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-3); }
.sd-avatar { width: 36px; height: 36px; border-radius: var(--r-2); font-size: var(--fs-4); }
.sd-title { font-weight: var(--fw-semibold); letter-spacing: 0; }
.sd-bar { align-items: stretch; gap: var(--s-3); padding: 0 var(--s-5); border-bottom: 1px solid var(--border); }
.sd-seg { padding: 0; gap: var(--s-1); background: transparent; border: 0; border-radius: 0; }
.sd-seg-btn { height: 48px; padding: 0 var(--s-3); margin-bottom: -1px; border-radius: 0; border-bottom: 2px solid transparent; font-weight: var(--fw-medium); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sd-seg-btn.active { background: transparent; color: var(--text); border-bottom: 2px solid var(--accent); }
.sd-search { height: 36px; align-self: center; border-radius: var(--r-1); }
.sd-body { padding: var(--s-4) var(--s-5); border-top: 0; gap: var(--s-3); }
.sd-card { border-radius: var(--r-2); }
.sd-card-head { padding: var(--s-3) var(--s-4); }
.sd-grid { gap: var(--s-4); padding: var(--s-1) var(--s-4) var(--s-4); }
.sd-style-row { padding: var(--s-3) var(--s-4); }
.sd-control { height: 36px; border-radius: var(--r-1); }
.sd-foot { padding: var(--s-3) var(--s-5); }
.sd-btn { height: auto; min-height: 32px; padding: 0 var(--s-4); border-radius: var(--r-1); font-weight: var(--fw-semibold); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sd-btn:hover { background: var(--surface-2); border-color: var(--text-4); }
.sd-ok:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: none; }

/* Settings window, lighter layout: sections are open (hairline-separated, not boxed), a changed field gets a small accent dot, the search has an icon. */
.sd-win { background: var(--surface-1); }
.sd-sub { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .02em; }
.sd-body { gap: 0; padding-top: var(--s-2); }
.sd-card { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding-bottom: var(--s-2); }
.sd-card:last-child { border-bottom: 0; }
.sd-card-head { padding: var(--s-4) 0 var(--s-3); color: var(--text-2); }
.sd-card-head:hover { color: var(--text); }
.sd-grid { padding: 0 0 var(--s-4); gap: var(--s-4) var(--s-5); }
.sd-field { padding-left: 0; border-left: 0; }
.sd-field.modified .sd-label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--s-2); border-radius: 50%; background: var(--accent); vertical-align: middle; }
.sd-style-row { padding-left: 0; padding-right: 0; }
.sd-search { padding-left: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; }
.sd-foot { background: var(--surface-0); }

/* Phone: the Style tab rows drop their controls onto a second line under the name, instead of squeezing switch + name + tag + three controls into one. */
@media (max-width: 520px) {
  .sd-win { top: 4vh; max-height: 90vh; }
  .sd-head { padding: 14px 14px 10px; gap: 10px; }
  .sd-bar { padding: 0 14px 12px; }
  .sd-body { padding: 14px 14px 12px; }
  .sd-foot { padding: 12px 14px; }
  .sd-style-row { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .sd-style-row .sd-label { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .sd-style-row .sd-ctl { flex: 1 1 100%; margin-left: 0; padding-left: 48px; gap: 8px; }
  .sd-style-row .sd-ctl .sd-mini { flex: 1 1 0; min-width: 0; width: auto; }
  .sd-style-row .sd-ctl .sd-mini.sd-op { flex: 0 0 64px; }
  .sd-style-row .sd-mini.sd-wide { flex: 1 1 100%; margin-left: 0; width: auto; }
  .sd-card-head { flex-wrap: wrap; }
}

/* Style tab controls + legend values */
.sd-ctl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sd-color { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--surface-0); cursor: pointer; }
.sd-color.unset { border-style: dashed; opacity: .6; }
.sd-mini { height: 30px; background: var(--surface-0); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-2); padding: 0 8px; font-size: var(--fs-2); }
.sd-mini:focus { outline: none; border-color: var(--accent); }
.sd-mini.w { width: 62px; }
.sd-mini.sd-op { width: 56px; font-variant-numeric: tabular-nums; }
.sd-mini.sd-wide { margin-left: auto; width: 110px; }
.sd-unit { font-size: var(--fs-2); color: var(--text-2); margin-left: -3px; }
.ind-vals { display: inline-flex; gap: 8px; font-size: var(--fs-2); font-variant-numeric: tabular-nums; font-weight: 600; max-width: 360px; overflow: hidden; white-space: nowrap; }
.ind-vals:empty { display: none; }

.sd-colorbox { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 8px; background: var(--surface-0); border: 1px solid var(--border-strong); border-radius: var(--r-2); }
.sd-colorbox input[type="color"] { width: 34px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; }
.sd-hex { font-size: var(--fs-2); color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Pine tables (script dashboards) over the chart */
.st-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.st-group { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 8px; box-sizing: border-box; }
/* Pine tables (script dashboards): a soft card instead of a bordered grid. A first-row header tinted with its state colour, muted labels,
   tabular numbers, and block-character gauges (█░) drawn as progress bars. */
.st-table {
  border-collapse: separate; border-spacing: 0; min-width: 214px; font-family: var(--font); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface-1);
  box-shadow: none;
}
.st-table td { padding: 5px 10px; white-space: pre; line-height: 1.3; border: none; border-bottom: 1px solid var(--border); vertical-align: middle; }
.st-table tr:last-child td { border-bottom: none; }
.st-table tr:first-child td:first-child { border-top-left-radius: 11px; }
.st-table tr:first-child td:last-child { border-top-right-radius: 11px; }
.st-table tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.st-table tr:last-child td:last-child { border-bottom-right-radius: 11px; }
.st-table td.st-label { color: var(--text-3) !important; font-size: var(--fs-1) !important; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.st-table td.st-num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right !important; }
.st-table tr.st-head td { padding-top: 8px; padding-bottom: 8px; background: color-mix(in srgb, var(--st-accent) 13%, transparent) !important; border-bottom-color: color-mix(in srgb, var(--st-accent) 28%, transparent); }
.st-table tr.st-head td:not(.st-label) { font-weight: 800; letter-spacing: .06em; }
.st-gauge { position: relative; height: 6px; min-width: 84px; border-radius: var(--r-1); background: var(--surface-3); overflow: hidden; }
.st-gauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-1); box-shadow: none; transition: width .35s ease; }

/* ---- candle customisation (Indicators panel) ---- */
.cp-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.cp-preset {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px 8px; border-radius: var(--r-2); cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border-strong); color: var(--text-2); transition: border-color .12s, background .12s, color .12s;
}
.cp-preset:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-3); }
.cp-preset.active { border-color: var(--accent); color: var(--text); box-shadow: var(--focus-ring); }
.cp-pair { display: flex; align-items: flex-end; gap: 5px; height: 24px; }
.cp-pair i { display: block; width: 8px; border: 1.5px solid; border-radius: 2px; }
.cp-name { font-size: var(--fs-1); font-weight: 600; white-space: nowrap; }
.set-color {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 36px; height: 26px; padding: 0; border-radius: var(--r-2); cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; overflow: hidden;
}
.set-color::-webkit-color-swatch-wrapper { padding: 0; }
.set-color::-webkit-color-swatch { border: none; border-radius: var(--r-2); }
.set-color::-moz-color-swatch { border: none; border-radius: var(--r-2); }

/* ---- embed mode: the chart page as one cell of the multi-chart layout (layout.js). The page's own toolbar drives the active cell, so a cell
   has none; the drawing tools bar still appears inside a cell when Draw is switched on for it. ---- */
body.embed .topbar-row, body.embed #mt5LimitBanner { display: none !important; }
body.embed #topbar { padding: 0; border-bottom: none; }
#embedTag {
  position: absolute; left: 8px; top: 8px; z-index: 7; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: var(--r-pill);
  font: 700 var(--fs-2) var(--font); color: var(--text); pointer-events: none;
  background: var(--surface-1); border: 1px solid var(--border);
}

/* ---- toolbar buttons (Indicator, Alerts, Draw, Replay, Layout): small, cheap motion ----
   Everything below animates transform / opacity (or a tiny icon path), so the GPU does the work and no layout is recomputed.
   Hover plays each icon's own little animation once; a button whose panel is open gets a lit state with an underline that grows in. */
.tb-btn { position: relative; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.tb-btn:active { transform: scale(.94); }
.tb-btn .ic { display: inline-block; transform-origin: 50% 50%; will-change: auto; }
button.tb-btn.active::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent);
  transform-origin: 50% 50%; animation: tb-underline .26s cubic-bezier(.2, .8, .2, 1);
}
button.tb-btn.active .ic { animation: tb-ic-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tb-underline { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes tb-ic-pop { from { transform: scale(.7); } to { transform: scale(1); } }

/* each icon's own hover animation */
#settingsBtn:hover .ic path:first-child { stroke-dasharray: 32; animation: ic-draw .6s ease-out; }                  /* the chart line draws itself */
#alertsBtn:hover .ic { transform-origin: 50% 12%; animation: ic-ring .7s ease-in-out; }                               /* the bell rings */
#toggleDrawBtn:hover .ic { animation: ic-write .6s ease-in-out; }                                                      /* the pencil writes */
#replayBtn:hover .ic { animation: ic-rewind .55s cubic-bezier(.3, .7, .3, 1); }                                        /* the arrow winds back */
#layoutBtn:hover .ic { animation: ic-grid .45s cubic-bezier(.34, 1.56, .64, 1); }                                      /* the panes breathe */
@keyframes ic-draw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes ic-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } }
@keyframes ic-write { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(2px, -2px) rotate(8deg); } 50% { transform: translate(-1px, 1px) rotate(-6deg); } 75% { transform: translate(2px, -1px) rotate(5deg); } }
@keyframes ic-rewind { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes ic-grid { 0% { transform: scale(1); } 40% { transform: scale(.78); } 100% { transform: scale(1); } }

/* things the toolbar opens arrive with a short slide / fade instead of snapping in (they play each time the element is shown) */
.side-panel:not(.hidden) { animation: panel-in .24s cubic-bezier(.2, .8, .2, 1); }
.lm:not(.hidden), .nav-menu[open] .nav-menu-panel { transform-origin: 0 0; animation: menu-in .17s cubic-bezier(.2, .8, .2, 1); }
.nav-menu[open] .nav-menu-panel { transform-origin: 100% 0; }
#drawToolbar:not(.hidden) { animation: bar-down .22s cubic-bezier(.2, .8, .2, 1); }
#replayBar:not(.hidden) { animation: bar-up .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bar-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes bar-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tb-btn, .tb-btn .ic, button.tb-btn.active::after, .side-panel, .lm, .nav-menu-panel, #drawToolbar, #replayBar,
  #settingsBtn .ic path, #alertsBtn .ic, #toggleDrawBtn .ic, #replayBtn .ic, #layoutBtn .ic { animation: none !important; transition: none !important; }
}

/* =====================================================================================================================================
   Motion pass. Every effect is transform / opacity (GPU), or a one-off animation of a small box; nothing loops forever except the loading
   skeleton and the reconnecting dot. All of it is off under prefers-reduced-motion (see the block at the end).
   ===================================================================================================================================== */

/* ---- toasts (toasts.js): bot events slide in at the top right ---- */
#toasts { position: fixed; top: 58px; right: 14px; z-index: 900; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 28px)); pointer-events: none; }
.toast {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 13px 12px; border-radius: var(--r-3); overflow: hidden; pointer-events: auto; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float);
  animation: toast-in .32s cubic-bezier(.2, .9, .25, 1.1); transition: opacity .2s ease, transform .2s ease;
}
.toast.out { opacity: 0; transform: translateX(24px); pointer-events: none; }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--toast-c, var(--accent)); }
.toast-icon {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2); font-weight: 800;
  color: var(--on-accent); background: var(--toast-c, var(--accent)); animation: tb-ic-pop .4s cubic-bezier(.34, 1.56, .64, 1) .08s both;
}
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: var(--fs-2); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.toast-detail { margin-top: 2px; font-size: var(--fs-1); color: var(--text-2); overflow-wrap: anywhere; }
.toast-x { flex-shrink: 0; width: 22px; height: 22px; padding: 0; border: none; border-radius: var(--r-2); background: transparent; color: var(--text-2); font-size: var(--fs-5); line-height: 1; cursor: pointer; }
.toast-x:hover { background: var(--surface-3); color: var(--text); }
.toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--toast-c, var(--accent)); opacity: .7; transform-origin: 0 50%; animation: toast-life linear forwards; }
.toast.hold .toast-bar { animation-play-state: paused; }
.toast-good { --toast-c: var(--success); } .toast-buy { --toast-c: var(--success); } .toast-bad { --toast-c: var(--danger); } .toast-sell { --toast-c: var(--danger); } .toast-warn { --toast-c: var(--warning); } .toast-info { --toast-c: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateX(34px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- the Alerts button: unread counter + the bell ringing when a new alert arrives ---- */
.bell-badge {
  position: absolute; top: -4px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--danger); color: var(--on-accent);
  font-size: var(--fs-1); font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface-1); pointer-events: none;
}
.bell-badge.pop { animation: badge-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
#alertsBtn.ringing .ic { transform-origin: 50% 12%; animation: ic-ring .8s ease-in-out; }
@keyframes badge-pop { 0% { transform: scale(.2); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.alert-row { animation: row-in .28s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes row-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---- symbol picker: rows stagger in when it opens; the star pops ---- */
.symbol-picker-list.opening .symbol-picker-row { animation: row-in .24s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 14) * 14ms); }
.sp-star.pop { animation: star-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes star-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(1); } }

/* ---- layout: new cells ease in; view transitions (layout change, maximize, page navigation) cross-fade ---- */
.lh-cell { animation: cell-in .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes cell-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease-out; }

/* ---- Candles panel: the preset you pick pops ---- */
.cp-preset.active { animation: cp-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cp-pop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ---- live feed dot: pulses while reconnecting, one soft ring when it comes back ---- */
.dot-off { animation: dot-wait 1.4s ease-in-out infinite; }
.dot-on { animation: dot-on .8s ease-out; }
@keyframes dot-wait { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes dot-on { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent); } to { box-shadow: 0 0 0 9px color-mix(in srgb, var(--success) 0%, transparent); } }

/* ---- dashboard: loading skeleton, rows sliding in, curves drawing in, smooth bars ---- */
.dash-main.is-loading :is(.dash-hero-value, .dash-fact-value, .dash-period-value, .dash-stat-value, .dash-health-value) {
  color: transparent !important; background: var(--surface-3); border-radius: var(--r-2); width: fit-content; min-width: 5.5ch; user-select: none;
  animation: skel 1.1s ease-in-out infinite alternate;
}
@keyframes skel { from { opacity: .45; } to { opacity: 1; } }
.dash-tbl tr.row-new { animation: row-glow 1.6s ease-out; }
.dash-tbl tr.row-new td { animation: row-in .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes row-glow { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.dash-chart.reveal { animation: chart-reveal 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes chart-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.gauge-fill { transition: width .7s cubic-bezier(.2, .8, .2, 1) !important; }
.dash-wl-win, .dash-wl-loss { transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* ---- save buttons: a check draws in on success, a shake on failure (shell.js) ---- */
.bp-primary { position: relative; }
.bp-primary.save-ok::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--success); color: var(--on-accent);
  font-size: var(--fs-6); font-weight: 800; animation: save-check .5s cubic-bezier(.34, 1.56, .64, 1);
}
.bp-primary.save-err { animation: save-shake .45s ease-in-out; box-shadow: 0 0 0 2px var(--danger); }
@keyframes save-check { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes save-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast-icon, .toast-bar, .bell-badge, #alertsBtn.ringing .ic, .alert-row, .symbol-picker-list.opening .symbol-picker-row, .sp-star.pop, .lh-cell,
  .cp-preset.active, .dot-off, .dot-on, .dash-main.is-loading :is(.dash-hero-value, .dash-fact-value, .dash-period-value, .dash-stat-value, .dash-health-value),
  .dash-tbl tr.row-new, .dash-tbl tr.row-new td, .dash-chart.reveal, .bp-primary.save-ok::after, .bp-primary.save-err { animation: none !important; }
  .gauge-fill, .dash-wl-win, .dash-wl-loss, .toast { transition: none !important; }
  @view-transition { navigation: none; }
}

/* ---- header icon buttons, candle chip in the Indicators panel, alert pop-up switch in the Alerts panel ---- */
.tb-btn.tb-icon { padding: 7px 9px; }
.panel-header-actions { display: inline-flex; align-items: center; gap: 6px; }
.panel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-size: var(--fs-2); cursor: pointer; }
.panel-chip:hover { background: var(--surface-3); color: var(--text); }
.alert-popup-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; margin-bottom: 10px; border-radius: var(--r-2); border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text); font-size: var(--fs-2); cursor: pointer; }
.alert-popup-toggle .switch { position: relative; width: 30px; height: 17px; border-radius: var(--r-pill); background: var(--border-strong); transition: background .2s ease; flex: none; }
.alert-popup-toggle .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--on-accent); transition: transform .2s ease; }
.alert-popup-toggle[aria-pressed="true"] .switch { background: var(--accent); }
.alert-popup-toggle[aria-pressed="true"] .switch::after { transform: translateX(13px); }

/* ---- polish: selection, thin scrollbars and a consistent keyboard focus ring (see .claude/DESIGN-SYSTEM.md) ---- */
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }
:where(a, button, [role="button"], summary):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- dropdown: every single <select> gets one chevron here (its specificity beats the `background:` shorthands of the control classes; bot-settings.css sets its own); the open list is the custom .dd-menu built in shell.js ---- */
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--focus-ring); }
.dd-menu {
  position: fixed; z-index: 960; overflow-y: auto; padding: var(--s-1); display: flex; flex-direction: column; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-2); box-shadow: var(--shadow-float);
  font-family: var(--font); animation: dd-in .12s var(--ease);
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }
.dd-group { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-1); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dd-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 34px; padding: 0 var(--s-3); border-radius: var(--r-1); font-size: var(--fs-3); color: var(--text); cursor: pointer; user-select: none; }
.dd-item.active { background: var(--surface-4); }
.dd-item.selected { color: var(--accent-text); font-weight: var(--fw-semibold); }
.dd-item.disabled { color: var(--text-4); cursor: not-allowed; }
.dd-check { display: inline-flex; flex: none; opacity: 0; color: var(--accent-text); }
.dd-item.selected .dd-check { opacity: 1; }
@media (pointer: coarse) { .dd-item { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .dd-menu { animation: none; } }

/* ---- object tree panel (#objectsPanel): drawings and indicators on this chart ---- */
.ot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 28px; margin-top: var(--s-2); font-size: var(--fs-1); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ot-head:first-child { margin-top: 0; }
.ot-row { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: var(--s-1) var(--s-2); border: 1px solid transparent; border-radius: var(--r-1); color: var(--text); cursor: default; }
.ot-row[tabindex] { cursor: pointer; }
.ot-row:hover { background: var(--surface-2); }
.ot-row.selected { background: var(--accent-soft); border-color: var(--accent-border); }
.ot-row.dim .ot-ic, .ot-row.dim .ot-label { opacity: .45; }
.ot-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ot-ic { display: inline-flex; flex: none; color: var(--text-2); }
.ot-row.selected .ot-ic { color: var(--accent-text); }
.ot-label { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.ot-name { font-size: var(--fs-2); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-detail { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-1); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-actions { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.ot-row .ot-actions { opacity: 0; transition: opacity var(--dur) var(--ease); }
.ot-row:hover .ot-actions, .ot-row:focus-within .ot-actions, .ot-row.selected .ot-actions { opacity: 1; }
@media (hover: none) { .ot-row .ot-actions { opacity: 1; } }
.ot-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: var(--text-3); cursor: pointer; }
.ot-btn:hover { background: var(--surface-3); color: var(--text); }
.ot-btn[aria-pressed="true"] { color: var(--accent-text); }
.ot-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ot-empty { margin: 0 0 var(--s-2); padding: 0 var(--s-2); font-size: var(--fs-2); color: var(--text-3); }
@media (max-width: 760px), (pointer: coarse) { .ot-btn { width: 32px; height: 32px; } .ot-row { min-height: 44px; } }

/* ---- drawing cursor tool: the chart's cursor follows what is under the pointer (set by drawing.js through data-dl-cursor) ---- */
[data-dl-cursor="move"], [data-dl-cursor="move"] * { cursor: move !important; }
[data-dl-cursor="nwse-resize"], [data-dl-cursor="nwse-resize"] * { cursor: nwse-resize !important; }
[data-dl-cursor="nesw-resize"], [data-dl-cursor="nesw-resize"] * { cursor: nesw-resize !important; }
[data-dl-cursor="ew-resize"], [data-dl-cursor="ew-resize"] * { cursor: ew-resize !important; }
[data-dl-cursor="ns-resize"], [data-dl-cursor="ns-resize"] * { cursor: ns-resize !important; }
[data-dl-cursor="not-allowed"], [data-dl-cursor="not-allowed"] * { cursor: not-allowed !important; }

/* ---- drawing colour picker in the draw toolbar ---- */
.draw-color { width: 30px; height: 26px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-1); background: var(--surface-0); cursor: pointer; vertical-align: middle; }
.draw-color.themed { border-style: dashed; }
.draw-color:disabled { opacity: .4; cursor: not-allowed; }
.draw-color::-webkit-color-swatch-wrapper { padding: 0; }
.draw-color::-webkit-color-swatch { border: none; border-radius: var(--r-1); }
.draw-color::-moz-color-swatch { border: none; border-radius: var(--r-1); }
.draw-color:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- colour picker popover (shell.js): replaces the browser's native colour popup, which cannot be themed ---- */
.cp-pop {
  position: fixed; z-index: 960; width: 232px; max-width: calc(100vw - 16px); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-2); box-shadow: var(--shadow-float);
  font-family: var(--font); animation: dd-in .12s var(--ease);
}
.cp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.cp-sw { aspect-ratio: 1; min-height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-1); cursor: pointer; }
.cp-sw:hover { border-color: var(--text-3); }
.cp-sw.selected { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }
.cp-sw:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }
.cp-hex { display: flex; align-items: center; gap: var(--s-2); }
.cp-chip { flex: none; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: var(--r-1); }
.cp-hex input { flex: 1 1 auto; min-width: 0; min-height: 28px; padding: 0 var(--s-2); background: var(--surface-0); border: 1px solid var(--border-strong); border-radius: var(--r-1); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-2); }
.cp-hex input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.cp-hex input.bad { border-color: var(--danger-border); }
.cp-reset { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--accent-text); font-size: var(--fs-2); font-weight: var(--fw-semibold); cursor: pointer; }
.cp-reset:hover { text-decoration: underline; }
@media (max-width: 640px), (pointer: coarse) { .cp-sw { min-height: 36px; } .cp-hex input, .cp-chip { min-height: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .cp-pop { animation: none; } }