/* TradingView-like shell: top toolbar, drawing tools on the left, chart, right panel, bottom toolbar. */
:root {
  --bg: #131722;
  --panel: #131722;
  --border: #2a2e39;
  --text: #d1d4dc;
  --strong: #f0f3fa;
  --muted: #787b86;
  --hover: #2a2e39;
  --active: #2a2e39;
  --selected: #363a45;
  --note-strength: 7%; /* how much of the rules card's colour tints the menu colour (rules.js) */
  --note-ink: #eef0f4;
  --note-ink-mix: 22%; /* how much ink darkens or lightens the card's colour where it is text */
  --check-a: #434651;
  --check-b: #2a2e39;
  --menu: #1e222d;
  --accent: #2962ff;
  --up: #089981;
  --down: #f23645;
  --warn: #f7a600;
  --tip: #363a45;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --font: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
  color-scheme: dark;
}
/* TradingView's current light palette: neutral greys rather than blue-greys. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --border: #ebebeb;
  --text: #0f0f0f;
  --strong: #0f0f0f;
  --muted: #787b86;
  --hover: #f2f2f2;
  --active: #ebebeb;
  --selected: #e3e6ec;
  --note-strength: 6%;
  --note-ink: #1f2328;
  --note-ink-mix: 58%;
  --check-a: #d1d4dc;
  --check-b: #ffffff;
  --menu: #ffffff;
  --tip: #131722;
  --shadow: 0 8px 28px rgba(19, 23, 34, 0.16);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 var(--font);
  overflow: hidden;
}
button, select, input, textarea { font: inherit; color: inherit; }
.spacer { flex: 1; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg { flex-shrink: 0; }

/* ---------- top toolbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 42px; /* 38px bar + 4px separator, as in TradingView */
  padding: 0 6px;
  border-bottom: 4px solid var(--border);
  font-size: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.tb-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--border); flex-shrink: 0; }
.tb-symbol, .tb-btn, .tfs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.tb-symbol:hover, .tb-btn:hover, .tfs button:hover { background: var(--hover); }
.tb-symbol b { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--strong); }
.tb-symbol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.tb-btn { padding: 0 3px; }
.tb-btn svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.tb-btn.wide { padding-right: 10px; }
/* a narrower window keeps the icons of Indicators and Replay (their names in the tooltip), as
   TradingView does, so the language switch and the account still fit on the bar */
@media (max-width: 1240px) {
  .tb-btn.wide { padding-right: 6px; }
  .tb-btn.wide .tb-label { display: none; }
}
.tb-btn .caret { width: 10px; height: 10px; margin-left: -2px; stroke-width: 1.2; }
.type-icon { display: inline-flex; }
.tfs { display: flex; gap: 1px; }
.tfs button { padding: 0 8px; font-variant-numeric: tabular-nums; }
.tfs button[aria-pressed="true"] { background: var(--active); color: var(--strong); }
.tfs .tf-more { padding: 0 4px; color: var(--muted); }
.tfs .tf-more svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
/* the interval menu: each unit's timeframes, a star to put one on the bar */
.tf-menu { min-width: 220px; max-height: min(560px, calc(100vh - 80px)); overflow-y: auto; padding: 4px 0; }
.tf-group { padding: 8px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tf-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; padding: 0 8px 0 14px; color: var(--text); cursor: pointer; }
.tf-item:hover { background: var(--hover); }
.tf-item[aria-checked="true"] { color: var(--accent); }
.menu .tf-star { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 4px; color: var(--muted); visibility: hidden; }
.tf-item:hover .tf-star, .menu .tf-star.on { visibility: visible; }
.menu .tf-star.on { color: var(--warn); }
.menu .tf-star svg { width: 15px; height: 15px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.menu .tf-star.on svg { fill: currentColor; }

/* ---------- popup menus ---------- */
.menu {
  position: fixed;
  z-index: 40;
  display: grid;
  min-width: 190px;
  padding: 6px 0;
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.menu button:hover { background: var(--hover); }
.menu button[aria-checked="true"] { color: var(--accent); }
.menu kbd { margin-left: auto; padding-left: 24px; font: inherit; font-size: 12px; color: var(--muted); }
.menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--border); }
.menu svg, .type-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.menu button svg { margin: -4px 0; }
.menu svg .solid, .type-icon svg .solid { fill: currentColor; }
.menu svg .fill, .type-icon svg .fill { fill: rgba(41, 98, 255, 0.25); }

/* ---------- layout ---------- */
.workspace { display: flex; flex: 1; min-height: 0; }
.stage { position: relative; flex: 1; min-width: 0; min-height: 0; }
#chart { position: absolute; inset: 0; }
.stage.drawing #chart { cursor: crosshair; }

/* ---------- drawing toolbar (left) ---------- */
.drawtools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 58px;
  padding: 6px 6px 6px 0; /* the right padding is room for the groups' flyout arrows; the buttons stay centred on the left 48px */
  border-right: 4px solid var(--border);
  overflow-y: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.drawtools button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 120ms ease, color 120ms ease;
}
.drawtools button:hover { background: var(--hover); }
.drawtools button[aria-pressed="true"] { background: var(--hover); color: var(--accent); }
/* The tool in use: a soft grey tile with a dark icon, as on TradingView; on/off toggles (magnet,
   lock, …) keep the blue icon so they read as "on". */
.drawtools button[data-tool][aria-pressed="true"]:not(.fo-tool) { background: var(--selected); color: var(--strong); }
/* Thin 1px line icons, drawn on a 28px grid at .5 offsets so strokes land on whole pixels. */
.drawtools svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.drawtools svg .slash { display: none; }
.drawtools button[aria-pressed="true"] .slash { display: inline; }
.dt-sep { width: 28px; height: 1px; margin: 4px 0; background: var(--border); flex-shrink: 0; }

/* Tool group: the button repeats the group's last tool, the arrow beside it opens the flyout. */
.dt-group { position: relative; flex-shrink: 0; }

/* Starred tools: a floating bar over the chart, dragged by its grip (TradingView's favorites). */
.favbar {
  position: fixed;
  z-index: 35;
  display: flex;
  align-items: center;
  padding: 3px 4px 3px 0;
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.favbar[hidden] { display: none; }
.fb-grip { display: grid; place-items: center; width: 18px; align-self: stretch; color: var(--muted); cursor: grab; }
.fb-grip:hover { color: var(--text); }
.drawtools .fb-grip svg { width: 8px; height: 16px; fill: currentColor; stroke: none; }
.fb-tools { display: flex; gap: 2px; }
.drawtools .favbar button { width: 34px; height: 34px; }
html.fav-dragging, html.fav-dragging * { cursor: grabbing !important; user-select: none; }
html.fav-dragging iframe { pointer-events: none; } /* split screen: the frames must not swallow the drag */
.drawtools .dt-favs[hidden] { display: none; }
.drawtools .dt-more {
  position: absolute;
  top: 0;
  right: -11px; /* from 2px past the icon to the bar's padding edge: a 14px target */
  width: 14px;
  height: 38px;
  border-radius: 3px;
  color: var(--muted);
}
.drawtools .dt-more:hover, .drawtools .dt-more[aria-expanded="true"] { background: var(--hover); color: var(--strong); }
.drawtools .dt-more svg { width: 6px; height: 10px; stroke-width: 1.2; }
.flyout {
  position: fixed;
  z-index: 45;
  width: max-content;
  min-width: 280px;
  max-height: calc(100vh - 16px);
  padding: 6px 0;
  overflow-y: auto;
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.fo-title { padding: 8px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fo-sep { height: 1px; margin: 6px 0; background: var(--border); }
.fo-item { display: flex; align-items: center; padding: 0 8px 0 6px; }
.fo-item:hover { background: var(--hover); }
.drawtools .fo-tool {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 38px;
  padding: 0 6px;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}
.drawtools .fo-tool:hover, .drawtools .fo-tool[aria-pressed="true"] { background: none; }
.fo-key { margin-left: auto; padding-left: 18px; font: 12px var(--font); color: var(--muted); letter-spacing: 0.04em; }
.drawtools .fo-star { width: 28px; height: 28px; color: var(--muted); visibility: hidden; }
.drawtools .fo-star:hover { background: none; color: var(--strong); }
.fo-item:hover .fo-star, .drawtools .fo-star[aria-pressed="true"] { visibility: visible; }
.drawtools .fo-star[aria-pressed="true"] { color: var(--strong); background: none; }
.drawtools .fo-star svg { width: 18px; height: 18px; }
.drawtools .fo-star[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- right panel ---------- */
.sidestrip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 46px;
  padding: 6px 0;
  border-left: 4px solid var(--border);
  flex-shrink: 0;
}
.sidestrip button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.sidestrip button:hover { background: var(--hover); }
.sidestrip button[aria-pressed="true"] { background: var(--hover); color: var(--accent); }
.sidestrip svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
/* With the panel open, a 1px line between the panel and the icon strip (the chart keeps its 4px). */
.sidepanel:not([hidden]) + .sidestrip { border-left-width: 1px; }
.sidepanel {
  display: flex;
  flex-direction: column;
  width: 300px;
  border-left: 4px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
  min-height: 0;
}
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--strong);
}
.sp-body { flex: 1; padding: 14px; overflow-y: auto; }
.sp-empty { color: var(--muted); }
.sp-sym { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sp-sym b { display: block; font-size: 17px; color: var(--strong); }
.sp-sym span { color: var(--muted); font-size: 12px; }
.sp-src { padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; white-space: nowrap; }
.sp-price { margin-top: 12px; font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--strong); }
.sp-price small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.sp-price.up, .sp-change.up { color: var(--up); }
.sp-price.down, .sp-change.down { color: var(--down); }
.sp-change { margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.sp-market { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.sp-market::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.sp-market.open { color: var(--up); }
.sp-market.open::before { background: var(--up); }
.sp-range { margin-top: 18px; }
.sp-range-head, .sp-range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-bar { position: relative; height: 4px; margin: 8px 0 6px; border-radius: 2px; background: linear-gradient(90deg, var(--down), var(--warn), var(--up)); }
.sp-bar i { position: absolute; top: -4px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--strong); }
.sp-grid { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 18px 0 0; font-variant-numeric: tabular-nums; }
.sp-grid dt { color: var(--muted); }
.sp-grid dd { margin: 0; text-align: right; color: var(--strong); }
.sp-h { margin: 22px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sp-sessions { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-sessions li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 2px 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.sp-sessions li.on { border-color: var(--accent); }
.sp-sessions i { width: 8px; height: 8px; border-radius: 2px; }
.sp-sname { font-weight: 600; color: var(--strong); }
.sp-stime { color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-sleft { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }
.sp-sessions li.on .sp-sleft { color: var(--accent); }
.sp-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.sp-body > .sp-h:first-child { margin-top: 0; }
.sp-sepline { height: 1px; margin: 16px -14px; background: var(--border); }
/* watchlist: one grid for all rows (subgrid), so the price columns line up */
.wl-list { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto minmax(56px, auto); gap: 1px 10px; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.wl-cols, .wl-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 0 4px; }
.wl-cols { padding-bottom: 4px; font-size: 11px; color: var(--muted); }
.wl-cols span:first-child { grid-column: 1 / 3; }
.wl-cols span, .wl-last, .wl-pct { text-align: right; white-space: nowrap; }
.wl-cols span:first-child { text-align: left; }
.wl-row { min-height: 30px; border-radius: 4px; cursor: pointer; }
.wl-row:hover { background: var(--hover); }
.wl-row.on { background: var(--hover); box-shadow: inset 2px 0 var(--accent); }
.wl-name { overflow: hidden; font-weight: 600; color: var(--strong); white-space: nowrap; text-overflow: ellipsis; }
.wl-last { color: var(--strong); }
.wl-pct { font-size: 12px; color: var(--muted); }
.wl-pct.up { color: var(--up); }
.wl-pct.down { color: var(--down); }
.wl-star, .sym-fav { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--muted); cursor: pointer; }
.wl-star:hover, .sym-fav:hover { color: var(--strong); }
.wl-star svg, .sym-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.wl-star.on, .sym-fav.on { color: var(--warn); }
.wl-star.on svg, .sym-fav.on svg { fill: currentColor; }

/* ---------- trading rules (rules.js): a sticky note over the charts ---------- */
.tb-btn[aria-pressed="true"] { color: var(--accent); }
.rules-note {
  /* The user's colour and opacity (rules.js sets --note-hue, --note-alpha, and --p for today's
     progress); everything else follows from them and the theme: a glass card of the menu colour
     barely tinted, the colour itself on the badge, the progress and the swatch. */
  --note-hue: #f2c94c;
  --note-alpha: 82%;
  --p: 0;
  --note-tint: color-mix(in srgb, var(--note-hue) var(--note-strength), var(--menu));
  --note-bg: color-mix(in srgb, var(--note-tint) var(--note-alpha), transparent);
  --note-text: var(--text);
  --note-strong: var(--strong);
  --note-muted: var(--muted);
  --note-line: color-mix(in srgb, var(--note-text) 9%, transparent);
  --note-border: color-mix(in srgb, var(--note-hue) 22%, var(--border));
  --note-accent: color-mix(in srgb, var(--note-hue), var(--note-ink) var(--note-ink-mix)); /* the colour as ink, readable on either theme */
  --note-fill: var(--note-hue);
  position: fixed;
  z-index: 34;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-width: 560px;
  max-height: 80vh;
  border: 1px solid var(--note-border);
  border-radius: 12px;
  background: var(--note-bg);
  color: var(--note-text);
  box-shadow: var(--shadow), 0 1px 2px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  font-size: 13px;
  overflow: hidden;
  resize: horizontal;
}
.rules-note.all { --note-fill: var(--up); --note-accent: var(--up); }
.rules-note.collapsed { min-width: 0; resize: none; border-radius: 999px; }
/* the header: a badge in the user's colour, the title and today's status, the tools */
.rn-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 10px; cursor: grab; user-select: none; }
.rn-head svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rn-badge { display: grid; flex-shrink: 0; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--note-fill) 16%, transparent); color: var(--note-accent); transition: background 0.2s, color 0.2s; }
.rn-badge svg { width: 18px; height: 18px; stroke-width: 1.7; }
.rn-title { min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--note-strong); white-space: nowrap; text-overflow: ellipsis; } /* a narrow card shortens its title, never its buttons */
.rn-space { flex: 1; }
.rn-head button { display: grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; margin-left: -6px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--note-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.rn-head button:hover, .rn-head button.on { background: color-mix(in srgb, var(--note-text) 10%, transparent); color: var(--note-strong); }
.rn-head button svg { width: 16px; height: 16px; }
/* today's status and progress under the header: the bar takes what the words leave, the colour
   fills it, green once every rule is ticked */
.rn-status { display: flex; align-items: center; gap: 10px; padding: 0 12px 8px; font-size: 11.5px; color: var(--note-muted); font-variant-numeric: tabular-nums; }
.rn-status span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rules-note.all .rn-status span { color: var(--up); font-weight: 600; }
.rn-progress { flex: 1; min-width: 48px; height: 4px; border-radius: 2px; background: var(--note-line); overflow: hidden; }
.rn-progress i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: 2px; background: var(--note-fill); transition: width 0.3s ease, background 0.3s; }
/* folded: a pill in its corner, today's progress as a ring */
.rn-tab { gap: 8px; padding: 6px 10px 6px 8px; cursor: pointer; }
.rn-tab:hover { background: color-mix(in srgb, var(--note-text) 7%, transparent); }
.rn-tab b { font-weight: 600; color: var(--note-strong); }
.rn-ring { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--note-fill) calc(var(--p) * 360deg), color-mix(in srgb, var(--note-text) 18%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px); mask: radial-gradient(circle, transparent 5.5px, #000 6px); }
.rn-count { flex-shrink: 0; font-size: 12px; color: var(--note-muted); font-variant-numeric: tabular-nums; }
.rules-note.all .rn-count { color: var(--up); font-weight: 600; }
.rn-chev { width: 14px; height: 14px; color: var(--note-muted); }
/* the checklist: each rule a row, ticked rules tinted green and quieter so what is left stands out */
.rn-list { display: grid; flex: 1; gap: 2px; min-height: 0; margin: 0; padding: 4px 6px 6px; overflow-y: auto; list-style: none; }
.rn-list li { display: grid; grid-template-columns: 18px 1.2em minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px 8px; border-radius: 8px; line-height: 1.45; cursor: pointer; transition: background 0.15s; }
.rn-list li:hover { background: color-mix(in srgb, var(--note-text) 6%, transparent); }
.rn-list li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rn-list li.done { background: color-mix(in srgb, var(--up) 9%, transparent); }
.rn-list li.done:hover { background: color-mix(in srgb, var(--up) 13%, transparent); }
.rn-list li.done .rn-text { color: var(--note-muted); }
.rn-num { padding-top: 1px; font-size: 11.5px; color: var(--note-muted); text-align: right; font-variant-numeric: tabular-nums; }
.rn-text { color: var(--note-strong); }
.rn-check { width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid color-mix(in srgb, var(--note-text) 38%, transparent); border-radius: 50%; transition: border-color 0.15s, background-color 0.15s; }
.rn-list li:hover .rn-check { border-color: var(--up); }
.rn-list li.done .rn-check {
  border-color: var(--up);
  background: var(--up) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.7' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.rn-list li.pop .rn-check { animation: rn-pop 0.25s ease-out; }
@keyframes rn-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rn-list li.pop .rn-check { animation: none; } .rn-progress i { transition: none; } }
.rn-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 10px; border-top: 1px solid var(--note-line); font-size: 11.5px; line-height: 1.4; color: var(--note-muted); }
.rn-link { flex-shrink: 0; padding: 3px 8px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--note-fill) 14%, transparent); color: var(--note-accent); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.rn-link:hover { background: color-mix(in srgb, var(--note-fill) 24%, transparent); }
/* the editor: one row per rule, as on the checklist */
.rn-elist { display: grid; flex: 1; gap: 2px; min-height: 0; margin: 0; padding: 2px 8px; overflow-y: auto; list-style: none; }
.rn-erow { display: grid; grid-template-columns: 14px 18px minmax(0, 1fr) 24px; align-items: start; gap: 6px; padding: 3px 2px; border-radius: 8px; }
.rn-erow .rn-grip, .rn-erow .rn-check { margin-top: 6px; }
.rn-erow .rn-del { margin-top: 2px; }
.rn-erow:hover, .rn-erow:focus-within { background: color-mix(in srgb, var(--note-text) 5%, transparent); }
.rn-erow.dragging { opacity: 0.4; }
.rn-erow.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.rn-erow.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.rn-grip { display: grid; place-items: center; color: var(--note-muted); cursor: grab; opacity: 0.5; }
.rn-erow:hover .rn-grip { opacity: 1; }
.rn-grip svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.rn-erow .rn-check { opacity: 0.5; }
.rn-input { display: block; width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: color-mix(in srgb, var(--note-text) 5%, transparent); color: var(--note-strong); font: 13px/1.4 var(--font); outline: none; resize: none; overflow: hidden; transition: border-color 0.15s, background 0.15s; }
.rn-input:focus { border-color: var(--accent); background: color-mix(in srgb, var(--menu) 60%, transparent); }
.rn-input::placeholder { color: var(--note-muted); opacity: 0.7; }
.rn-del { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--note-muted); cursor: pointer; opacity: 0; }
.rn-erow:hover .rn-del, .rn-erow:focus-within .rn-del { opacity: 1; }
.rn-del:hover { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.rn-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.rn-add { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 12px 0; padding: 7px 10px; border: 1px dashed color-mix(in srgb, var(--note-text) 25%, transparent); border-radius: 8px; background: none; color: var(--note-text); font-size: 12.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.rn-add:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--note-strong); }
.rn-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rn-empty { display: grid; gap: 10px; padding: 4px 12px 14px; color: var(--note-muted); }
.rn-empty p { margin: 0 2px; line-height: 1.45; }
.rn-empty .rn-add { margin: 0; }
.rn-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-top: 1px solid var(--note-line); }
.rn-actions button { padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--note-text) 20%, transparent); border-radius: 6px; background: none; color: var(--note-text); font-weight: 500; cursor: pointer; }
.rn-actions button:hover { background: color-mix(in srgb, var(--note-text) 7%, transparent); }
.rn-actions button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.rn-actions button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
/* colour and opacity of the card */
.rn-style { display: grid; gap: 10px; margin: 0 12px 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--note-text) 5%, transparent); }
.rn-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-sw { position: relative; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); cursor: pointer; transition: transform 0.15s; }
.rn-sw:hover { transform: scale(1.12); }
.rn-sw.on { box-shadow: 0 0 0 2px var(--menu), 0 0 0 4px var(--note-strong); }
.rn-sw.custom { display: grid; place-items: center; background: conic-gradient(#f23645, #f2c94c, #6fcf97, #56a8f5, #b18cf2, #f28fb1, #f23645); }
.rn-sw.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rn-style .ui-opacity { display: flex; }
.rn-style .ui-opacity input[type="range"] { flex: 1; width: auto; }
.rn-style-label { margin-bottom: 2px; font-size: 11px; color: var(--note-muted); }
html.rn-busy iframe { pointer-events: none; } /* split screen: a drag or resize of the note keeps going over the charts */
html.rn-dragging, html.rn-dragging * { cursor: grabbing !important; user-select: none; }

/* ---------- trading journal (right panel) ---------- */
.jr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jr-tile { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }
.jr-tile b { font-size: 16px; font-weight: 600; color: var(--strong); font-variant-numeric: tabular-nums; }
.jr-tile span { font-size: 11px; color: var(--muted); }
.jr-tile .up, .jr-res .up { color: var(--up); }
.jr-tile .down, .jr-res .down { color: var(--down); }
.jr-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 12px 0 4px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; }
.jr-chip { min-width: 0; padding: 4px 2px; overflow: hidden; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.jr-chip:hover { color: var(--text); }
.jr-chip.on { background: var(--hover); color: var(--strong); font-weight: 600; }
.jr-list { margin: 0; padding: 0; list-style: none; }
.jr-day { padding: 12px 2px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.jr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; }
.jr-row:hover, .jr-row.on { background: var(--hover); }
.jr-side { padding: 2px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; }
.jr-side.long { color: var(--up); background: rgba(8, 153, 129, 0.14); }
.jr-side.short { color: var(--down); background: rgba(242, 54, 69, 0.14); }
.jr-bt { padding: 1px 4px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.04em; vertical-align: 1px; }
.jr-main, .jr-res { display: grid; min-width: 0; }
.jr-main b { color: var(--strong); font-weight: 600; }
.jr-main small, .jr-res small { overflow: hidden; font-size: 11px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.jr-res { text-align: right; font-variant-numeric: tabular-nums; }
.jr-res b { font-weight: 600; color: var(--strong); }
.jr-row.pending .jr-res b, .jr-row.open .jr-res b:not(.up):not(.down) { color: var(--muted); }
.jr-detail { margin: 2px 0 8px 6px; padding: 4px 0 8px 10px; border-left: 2px solid var(--accent); }
.jr-detail .sp-grid { grid-template-columns: auto minmax(0, 1fr); margin-top: 4px; font-size: 12px; gap: 5px 10px; }
.jr-detail .sp-grid dt { white-space: nowrap; }
.jr-actions a.ot-add { text-decoration: none; }
.jr-note { margin: 10px 0 6px; font-size: 12px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.jr-note.empty { color: var(--muted); }
.jr-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -4px; }
/* the rules each trade kept (rules.js) */
.jr-discipline { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 6px; font-size: 11.5px; color: var(--muted); }
.jr-discipline span:nth-child(even) { text-align: right; }
.jr-discipline b { margin-left: 3px; font-weight: 600; color: var(--strong); font-variant-numeric: tabular-nums; }
.jr-discipline b.up { color: var(--up); }
.jr-report { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; margin-bottom: 8px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--strong); text-decoration: none; }
.jr-report:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.jr-report span { font-weight: 600; }
.jr-report small { grid-row: 2; color: var(--muted); font-size: 11px; }
.jr-report i { grid-row: 1 / 3; grid-column: 2; color: var(--accent); font-style: normal; font-size: 16px; }
.ot-head { display: flex; align-items: center; justify-content: space-between; }
.ot-head .sp-h { margin: 14px 0 8px; }
.ot-head:first-child .sp-h { margin-top: 0; }
.ot-add { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.ot-add.danger { color: var(--down); }
.ot-add:hover { background: var(--hover); }
.ot-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ot-list li { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px; border-radius: 4px; }
.ot-list li[data-draw] { cursor: pointer; }
.ot-list li:hover, .ot-list li.sel { background: var(--hover); }
.ot-list li.off .ot-name { opacity: 0.45; }
.ot-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ot-name { display: grid; flex: 1; min-width: 0; }
.ot-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ot-btns { display: flex; gap: 2px; visibility: hidden; }
.ot-list li:hover .ot-btns, .ot-list li.off .ot-btns { visibility: visible; }
.ot-btns button, .lg-btns button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.ot-btns button:hover, .lg-btns button:hover { background: var(--hover); color: var(--strong); }
.ot-btns svg, .lg-btns svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ot-empty { color: var(--muted); font-size: 12px; }

/* ---------- legend ---------- */
.legend {
  position: absolute;
  left: 10px;
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: 2px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.main-legend { top: 6px; max-width: calc(100% - 100px); } /* stops short of the price scale, so OHLC wraps */
/* Title and OHLC share one line (TradingView); a narrow chart wraps them. */
.lg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 24px; }
.lg-title { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--strong); text-shadow: 0 0 4px var(--bg); }
.lg-sym { font-weight: 500; cursor: pointer; pointer-events: auto; }
.lg-sym:hover { color: var(--accent); }
.lg-sep { color: var(--muted); }
.lg-mkt { width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--muted); }
.lg-mkt.live { background: var(--up); }
.lg-main {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  pointer-events: auto;
}
.lg-main:hover { background: var(--hover); color: var(--strong); }
.lg-main svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.lg-main[aria-pressed="true"] { color: var(--warn); cursor: default; }
.lg-main[aria-pressed="true"]:hover { background: none; color: var(--warn); }
.lg-main[aria-pressed="true"] svg { fill: currentColor; }
/* Split screen: only the main chart shows OHLC, bid/ask and the indicator rows. */
.secondary #lgOhlc, .secondary #trade, .secondary #legendRows { display: none; }
.lg-ohlc { display: flex; flex-wrap: wrap; gap: 0 8px; text-shadow: 0 0 4px var(--bg); }
.lg-ohlc .k { color: var(--strong); margin-right: 1px; }
.lg-ohlc.up { color: var(--up); }
.lg-ohlc.down { color: var(--down); }
.lg-ind {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 4px 0 2px;
  margin-left: -2px;
  border: 1px solid transparent;
  border-radius: 4px;
  pointer-events: auto;
  text-shadow: 0 0 4px var(--bg);
}
.lg-ind:hover { border-color: var(--border); background: var(--bg); }
.lg-ind.off .lg-name, .lg-ind.off .lg-vals { opacity: 0.4; }
.lg-name { color: var(--text); }
.lg-vals { display: flex; gap: 8px; }
.lg-btns { display: flex; gap: 1px; visibility: hidden; }
/* Status line settings: what the legend leaves out, and a background behind it. */
.no-title .lg-sym, .no-title .lg-sep, .no-title #lgTf, .no-title #lgSrc { display: none; }
.no-mkt #lgMkt { display: none; }
.no-ohlc #lgOhlc > span:not(#lgChg) { display: none; }
.no-chg #lgChg { display: none; }
.no-ohlc.no-chg #lgOhlc { display: none; }
.lg-no-names .lg-name { display: none; }
.lg-no-vals .lg-vals { display: none; }
.lg-bg .lg-head, .lg-bg .lg-ind { padding-left: 6px; padding-right: 6px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.lg-ind:hover .lg-btns, .lg-ind.off .lg-btns { visibility: visible; }
.pane-legend { top: 0; }

/* SELL / BUY boxes */
/* SELL / BUY boxes, TradingView's size: 84×34 with the spread as plain text between them. */
.trade { display: flex; align-items: center; margin: 4px 0; pointer-events: auto; cursor: default; }
.trade .sell, .trade .buy {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 84px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid;
  border-radius: 4px;
  background: var(--bg);
  line-height: 1.15;
}
.trade .sell { border-color: var(--down); color: var(--down); }
.trade .buy { border-color: var(--accent); color: var(--accent); }
.trade .sell span, .trade .buy span { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.trade small { font-size: 9px; letter-spacing: 0.04em; }
.trade .spread { min-width: 38px; padding: 0 4px; text-align: center; font-size: 11px; color: var(--muted); text-shadow: 0 0 4px var(--bg); }


.banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(640px, calc(100% - 32px));
  padding: 10px 14px;
  background: var(--menu);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.banner.error { border-left-color: var(--down); }
.banner p { margin: 0; }
.banner a {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.banner a:hover { filter: brightness(1.1); }
.hint {
  position: absolute;
  bottom: 96px; /* above the drawing bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* a quiet, see-through pill: it says what to do without pulling the eye off the chart */
  background: color-mix(in srgb, var(--menu) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  opacity: 0.8;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.spinner { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.spinner i {
  width: 34px;
  height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- bar for the selected drawing ---------- */
.drawbar {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.db-name { font-weight: 600; padding: 0 4px; }
.db-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.db-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c);
  background-clip: content-box;
  cursor: pointer;
}
.db-swatch.on { border-color: var(--text); }
.db-width {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.db-width i { display: block; width: 16px; background: var(--text); }
.db-width.on, .db-width:hover, .db-btn:hover { background: var(--hover); }
.db-btn { border: 0; background: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.db-btn.danger { color: var(--down); }
.db-btn.on { color: var(--accent); }

/* ---------- settings dialog and pickers (ui.js), TradingView style ---------- */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 600;
  color: var(--strong);
}
.ds-x { border: 0; background: none; font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer; color: var(--muted); }
.ds-x:hover { color: var(--text); }
.ui-dialog {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: 500px;
  max-width: calc(100vw - 16px);
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
/* Every settings dialog, as TradingView's: a bold title, a thin ×, 14px text, checkboxes filled in
   the text colour, 36px controls and 40px buttons with 8px corners. */
.ui-head { display: flex; align-items: center; gap: 6px; padding: 20px 16px 12px 24px; cursor: move; user-select: none; }
.ui-title { font-size: 20px; font-weight: 700; color: var(--strong); }
.ui-title-input { width: 300px; padding: 3px 8px; font-size: 18px; font-weight: 700; color: var(--strong); background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; outline: none; }
.ui-icon { padding: 2px 5px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.ui-icon:hover { color: var(--strong); background: var(--hover); }
.ui-x { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.ui-x:hover { color: var(--strong); background: var(--hover); }
.ui-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.ui-tabs { display: flex; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.ui-tabs button {
  margin-bottom: -1px;
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.ui-tabs button:hover { color: var(--text); }
.ui-tabs button.on { color: var(--strong); border-bottom-color: var(--strong); }
.ui-body { display: grid; grid-auto-rows: max-content; align-content: start; gap: 14px; padding: 20px 24px; overflow-y: auto; min-height: 0; font-size: 14px; } /* max-content: a body taller than the dialog scrolls instead of squeezing its rows to their min-height */
.ui-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; }
.ui-row.full { grid-template-columns: minmax(0, 1fr); }
.ui-row.full > .ui-label { display: none; }
/* a checkbox with nothing beside it: its label may use the whole width */
.ui-row:has(> .ui-ctrls:empty) { grid-template-columns: minmax(0, 1fr); }
.ui-row > .ui-ctrls:empty { display: none; }
.ui-label { color: var(--text); }
.ui-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ui-section { margin: 14px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ui-body > .ui-section:first-child { margin-top: 0; }
.ui-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ui-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ui-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ui-dialog .ui-check input { accent-color: var(--strong); }
.ui-unit { color: var(--muted); }
.ui-color {
  position: relative;
  width: 40px;
  height: 34px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
}
.ui-color::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 3px;
  background: conic-gradient(#c8c8c8 25%, #ffffff 0 50%, #c8c8c8 0 75%, #ffffff 0) 0 0 / 8px 8px;
}
.ui-color i { position: relative; display: block; width: 100%; height: 100%; border-radius: 3px; }
.ui-pick, .ui-toggle {
  display: grid;
  place-items: center;
  height: 34px;
  min-width: 78px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
}
.ui-pick.narrow { min-width: 46px; }
.ui-toggle { min-width: 34px; padding: 0; font-family: Georgia, serif; font-size: 15px; }
.ui-toggle.on { background: var(--hover); border-color: var(--strong); }
.ui-color:hover, .ui-pick:hover, .ui-toggle:hover { border-color: var(--muted); }
.ui-line { width: 40px; height: 10px; stroke: currentColor; stroke-width: 1.5; }
.ui-select, .ui-input {
  height: 34px;
  padding: 0 10px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ui-select { min-width: 120px; cursor: pointer; }
.ui-input { width: 130px; }
.ui-input.wide { width: 100%; }
.ui-input.num { width: 84px; }
textarea.ui-input { height: auto; padding: 8px 10px; resize: vertical; }
.ui-select:focus, .ui-input:focus { outline: none; border-color: var(--accent); }
.ui-out { color: var(--muted); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ui-out[data-out="result"] { display: block; color: var(--strong); font-size: 14px; }
.ui-out.warn { display: block; color: var(--warn); line-height: 1.45; }
.ui-out.warn:empty { display: none; }
/* one-off actions in a dialog row: + TP, × (drawings.js) */
.ui-act { height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ui-act:hover { background: var(--hover); color: var(--strong); }
.ui-act.icon { width: 28px; padding: 0; color: var(--muted); font-size: 17px; line-height: 1; }
.ui-act.icon:hover { color: var(--down); }
.ui-label .ui-act.icon { width: 22px; height: 22px; margin-left: 6px; border-color: transparent; vertical-align: middle; font-size: 15px; }
.ui-label .ui-act.icon:hover { border-color: var(--border); }
.ui-input[type="datetime-local"] { width: 210px; }
/* Opacity, TradingView style: the track fades from see-through (checkerboard) into the colour,
   a white thumb ringed in the text colour, the percent in a box you can type into. */
.ui-opacity { --c: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.ui-opacity input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 12px;
  margin: 0;
  border-radius: 6px;
  background:
    linear-gradient(to right, transparent, var(--c)),
    repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 8px 8px;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.25);
  cursor: pointer;
}
.ui-opacity input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--strong);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ui-opacity input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--strong);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ui-opacity input[type="range"]::-moz-range-track { background: transparent; }
.ui-pct {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: text;
}
.ui-pct:focus-within { border-color: var(--accent); }
.ui-pct input { width: 3ch; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: right; -moz-appearance: textfield; }
.ui-pct input:focus { outline: none; }
.ui-pct input::-webkit-inner-spin-button, .ui-pct input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ui-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.ui-level { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-level .ui-input.lv { flex: 1; width: auto; min-width: 0; }
.ui-level.off .ui-input { color: var(--muted); background: var(--hover); }
/* Visibility (TradingView's): a unit, its first and last timeframe in boxes, and a slider with two
   thumbs between them; --a and --b place the thumbs (0–1) for the filled part of the track. */
.ui-vis { display: grid; gap: 14px; }
.ui-vis-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; }
.ui-vis-row.off .ui-span { opacity: 0.45; }
.ui-span { --a: 0; --b: 1; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; gap: 14px; }
.ui-span .ui-input { width: 100%; }
.ui-span-track { position: relative; height: 20px; }
.ui-span-track::before, .ui-span-track::after { content: ""; position: absolute; top: 8px; height: 4px; border-radius: 2px; }
.ui-span-track::before { left: 0; right: 0; background: var(--border); }
.ui-span-track::after { left: calc(8px + (100% - 16px) * var(--a)); right: calc(8px + (100% - 16px) * (1 - var(--b))); background: var(--strong); }
.ui-span-track input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 20px;
  margin: 0;
  background: none;
  pointer-events: none; /* only the thumbs take the mouse, so both can be dragged */
}
.ui-span-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--strong);
  border-radius: 50%;
  background: #fff;
  pointer-events: auto;
  cursor: pointer;
}
.ui-span-track input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--strong);
  border-radius: 50%;
  background: #fff;
  pointer-events: auto;
  cursor: pointer;
}
.ui-span-track input[type="range"]::-moz-range-track { background: transparent; }
@media (max-width: 540px) {
  .ui-vis-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.ui-foot { display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); }
.ui-btn { height: 34px; padding: 0 16px; border: 1px solid var(--border); border-radius: 6px; background: none; font-weight: 600; cursor: pointer; }
.ui-btn:hover { background: var(--hover); }
.ui-dialog .ui-btn.tpl { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 18px; }
.ui-btn.tpl svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ui-btn.primary { background: var(--strong); border-color: var(--strong); color: var(--bg); }
.ui-btn.primary:hover { filter: brightness(0.92); }
/* inside a settings dialog (the payment box, admin and journal pages keep the sizes above) */
.ui-dialog .ui-color { width: 36px; height: 36px; border-radius: 8px; }
.ui-dialog .ui-pick, .ui-dialog .ui-toggle, .ui-dialog .ui-select, .ui-dialog .ui-input { height: 36px; border-radius: 8px; }
.ui-dialog .ui-toggle { min-width: 36px; }
.ui-dialog textarea.ui-input { height: auto; }
.ui-dialog .ui-pct { height: 32px; border-radius: 6px; font-size: 14px; }
.ui-dialog .ui-btn { height: 40px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.ui-dialog .ui-btn[data-ui="cancel"] { border-color: var(--strong); }
/* Chart settings, as TradingView's: a large centred dialog with the sections as a list with icons
   on the left. */
.ui-dialog.side { width: 780px; height: min(620px, calc(100vh - 16px)); }
.ui-dialog.side .ui-head { padding: 20px 20px 14px 28px; }
.ui-main { display: flex; flex: 1; min-height: 0; }
.ui-nav { display: flex; flex-direction: column; gap: 2px; width: 232px; flex-shrink: 0; padding: 6px 12px 16px 28px; overflow-y: auto; }
.ui-nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.ui-nav button:hover { background: var(--hover); }
.ui-nav button.on { background: var(--hover); color: var(--strong); font-weight: 600; }
.ui-nav svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ui-dialog.side .ui-body { flex: 1; padding: 6px 28px 24px 16px; }
.ui-dialog.side .ui-row { grid-template-columns: 170px minmax(0, 1fr); }
.ui-dialog.side .ui-row.full, .ui-dialog.side .ui-row:has(> .ui-ctrls:empty) { grid-template-columns: minmax(0, 1fr); }
.ui-dialog.side .ui-section { margin-top: 22px; }
.ui-dialog.side .ui-body > .ui-section:first-child { margin-top: 14px; }
.ui-dialog.side .ui-select { min-width: 180px; }
.ui-dialog.side .ui-foot { padding: 16px 28px; }
@media (max-width: 540px) {
  .ui-head { padding: 16px 12px 10px 16px; }
  .ui-tabs { gap: 18px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .ui-tabs button { flex-shrink: 0; }
  .ui-body { padding: 16px; }
  .ui-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ui-foot { padding: 12px 16px; }
}
/* A narrow window: the sections become a row of tabs over the settings. */
@media (max-width: 720px) {
  .ui-dialog.side .ui-head { padding: 16px 12px 10px 16px; }
  .ui-main { flex-direction: column; }
  .ui-nav { flex-direction: row; width: auto; padding: 0 12px 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .ui-nav button { flex-shrink: 0; height: 36px; gap: 8px; font-size: 14px; }
  .ui-nav svg { width: 22px; height: 22px; }
  .ui-dialog.side .ui-body { padding: 6px 16px 16px; }
  .ui-dialog.side .ui-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ui-dialog.side .ui-foot { padding: 12px 16px; }
}
.ui-pop {
  position: fixed;
  z-index: 55;
  padding: 10px;
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.ui-pal { display: grid; gap: 4px; }
.ui-pal-row { display: flex; gap: 4px; }
.ui-pal-row.first { margin-bottom: 6px; }
.ui-sw {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.3);
  cursor: pointer;
}
.ui-sw:hover { transform: scale(1.15); }
.ui-sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-pal-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ui-custom {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px dashed var(--muted);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
}
.ui-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* the colour picker's opacity: a label above the slider, as on TradingView */
.ui-alpha { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ui-alpha-label { margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.ui-alpha .ui-opacity { display: flex; }
.ui-alpha .ui-opacity input[type="range"] { flex: 1; width: auto; }
.ui-pop.choice { display: grid; padding: 4px 0; }
.ui-choice { display: grid; place-items: center; padding: 8px 16px; border: 0; background: none; color: var(--text); cursor: pointer; }
.ui-choice.text { place-items: center start; white-space: nowrap; }
.ui-choice:hover { background: var(--hover); }
.text-edit {
  position: absolute;
  z-index: 7;
  min-width: 180px;
  padding: 2px 4px;
  font-size: 14px;
  background: var(--menu);
  border: 1px solid var(--accent);
  border-radius: 3px;
  outline: none;
}

/* ---------- modal dialogs ---------- */
/* A fixed 100% cell, so the card's "100% - 48px" heights resolve; in an auto row the list's full
   height (hundreds of symbols) set the row and pushed the centred card off screen. */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; grid-template: 100% / 100%; place-items: center; background: rgba(0, 0, 0, 0.45); }
.modal-card {
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100% - 32px));
  max-height: min(640px, calc(100% - 48px));
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.modal-head { padding: 14px 16px; font-size: 16px; cursor: default; }
.pk-search { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.pk-search svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.pk-search input { flex: 1; border: 0; background: none; outline: none; font-size: 15px; }
.pk-list { overflow-y: auto; padding: 6px 0; }
.pk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.pk-row:hover { background: var(--hover); }
.pk-name { color: var(--strong); font-weight: 600; }
.pk-name em { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.pk-desc { grid-column: 1; color: var(--muted); font-size: 12px; line-height: 1.45; }
.pk-state { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: 12px; white-space: nowrap; }
.pk-row.done { cursor: default; }
.pk-row.done .pk-state { color: var(--muted); }
.pk-empty { padding: 16px; color: var(--muted); }

/* symbol search */
.sym-card { width: min(720px, calc(100% - 32px)); height: min(640px, calc(100% - 48px)); }
.sym-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.sym-tabs button { padding: 4px 11px; border: 1px solid var(--border); border-radius: 14px; background: none; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.sym-tabs button:hover { background: var(--hover); }
.sym-tabs button[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--bg); }
.sym-list { flex: 1; }
.sym-head { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sym-row {
  display: grid;
  grid-template-columns: 28px minmax(96px, 150px) 1fr auto 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 7px 16px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sym-row:hover, .sym-row.on { background: var(--hover); }
.sym-name { overflow: hidden; font-weight: 600; color: var(--strong); white-space: nowrap; text-overflow: ellipsis; }
.sym-name mark { background: none; color: var(--accent); }
.sym-row.current .sym-name::after { content: " •"; color: var(--accent); }
.sym-desc { overflow: hidden; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sym-group { font-size: 11px; color: var(--muted); }
/* The symbol's round icon (symbols.js): one picture, two overlapping ones for a pair (the base in
   front, ringed in the list's colour), or a letter on a colour of its own. */
.sym-ico { position: relative; display: block; width: 28px; height: 28px; flex-shrink: 0; }
.sym-ico img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.sym-ico.pair img { width: 20px; height: 20px; }
.sym-ico.pair img.a { inset: 0 auto auto 0; box-shadow: 0 0 0 1.5px var(--menu); }
.sym-ico.pair img.b { inset: auto 0 0 auto; }
.sym-row:hover .sym-ico.pair img.a, .sym-row.on .sym-ico.pair img.a { box-shadow: 0 0 0 1.5px var(--hover); }
.sym-ico.mono { display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h) 52% 46%); color: #fff; font-size: 13px; font-weight: 600; }
/* a favourite keeps its star; the others show it on hover */
.sym-fav:not(.on) { visibility: hidden; }
.sym-row:hover .sym-fav, .sym-row.on .sym-fav { visibility: visible; }

/* ---------- depth of market (sidebar.js) ---------- */
.dom-head, .dom-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; }
.dom-head { padding: 0 0 6px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dom-head span:first-child { text-align: right; padding-right: 6px; }
.dom-head span:nth-child(2) { text-align: center; }
.dom-head span:last-child { padding-left: 6px; }
.dom-ladder { font-size: 12px; font-variant-numeric: tabular-nums; }
.dom-row { height: 22px; }
.dom-row:hover { background: var(--hover); }
.dom-px { text-align: center; color: var(--strong); }
.dom-row.ask .dom-px { color: var(--down); }
.dom-row.bid .dom-px { color: var(--up); }
.dom-cell { position: relative; display: flex; align-items: center; height: 100%; padding: 0 6px; }
.dom-bid { justify-content: flex-end; }
.dom-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; }
.dom-bid .dom-bar { right: 0; background: color-mix(in srgb, var(--up) 24%, transparent); }
.dom-ask .dom-bar { left: 0; background: color-mix(in srgb, var(--down) 22%, transparent); }
.dom-cell b { position: relative; font-weight: 500; color: var(--text); }
.dom-spread { margin: 2px 0; padding: 3px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; color: var(--muted); }
.dom-sum { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.dom-bid-t { color: var(--up); }
.dom-ask-t { color: var(--down); }
.dom-imb { display: flex; height: 6px; margin: 4px 0 10px; overflow: hidden; border-radius: 3px; background: var(--down); }
.dom-imb .b { background: var(--up); }
/* a row three times the middle one: bold, its bar stronger */
.dom-row.big b { font-weight: 700; color: var(--strong); }
.dom-row.big.bid .dom-bar { background: color-mix(in srgb, var(--up) 55%, transparent); }
.dom-row.big.ask .dom-bar { background: color-mix(in srgb, var(--down) 55%, transparent); }
.dom-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.dom-steps { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; }
.dom-steps button { padding: 2px 8px; border: 0; border-radius: 5px; background: none; color: var(--muted); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.dom-steps button:hover { color: var(--text); }
.dom-steps button[aria-pressed="true"] { background: var(--hover); color: var(--strong); font-weight: 600; }
.sp-note.warn { color: var(--warn); }
/* DOM Levels, Heatmap, Large orders: on and off from the DOM tab (sidebar.js) */
.dom-inds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.dom-inds button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 7px 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.dom-inds button span { max-width: 100%; line-height: 1.25; text-align: center; overflow-wrap: anywhere; } /* "Том захиалга" takes two lines */
.dom-inds button:hover { background: var(--hover); color: var(--text); }
.dom-inds button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--strong); font-weight: 600; }
.dom-inds svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.dom-inds svg .f { fill: currentColor; fill-opacity: 0.45; }

/* ---------- bar replay (app.js) ---------- */
/* the controls float over the chart, above the time axis, as on TradingView */
.rp-bar {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max-content; /* centred by translate: without it the bar could only use half the chart */
  max-width: calc(100% - 16px);
  padding: 4px 6px;
  transform: translateX(-50%);
  background: var(--menu);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.rp-bar button { display: grid; grid-auto-flow: column; place-items: center; gap: 4px; height: 32px; min-width: 32px; padding: 0 5px; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.rp-bar button:hover { background: var(--hover); color: var(--strong); }
.rp-bar button:disabled { opacity: 0.35; cursor: default; background: none; }
.rp-bar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.rp-bar svg .fill { fill: currentColor; stroke: none; }
.rp-bar [data-rp="play"] svg path { fill: currentColor; }
.rp-bar select, .rp-bar input[type="date"] { height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.rp-bar select { cursor: pointer; }
.rp-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.rp-time { padding: 0 8px; color: var(--strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-msg { padding: 0 8px; color: var(--muted); white-space: nowrap; }
.rp-exit span { font-weight: 600; }
/* choosing the start: the bars after the line are what the replay hides */
.rp-cut { position: absolute; z-index: 2; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--bg) 62%, transparent); pointer-events: none; }
.stage.replaying #chart { cursor: default; }

/* ---------- bottom toolbar ---------- */
.bottombar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 8px 0 6px;
  border-top: 4px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.ranges { display: flex; gap: 1px; }
.ranges button, .bb-btn {
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ranges button:hover, .bb-btn:hover { background: var(--hover); }
.bb-btn[aria-pressed="true"] { color: var(--accent); }
.clock { font-variant-numeric: tabular-nums; }
.source { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.source::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.source.live::before { background: var(--up); box-shadow: 0 0 0 3px rgba(8, 153, 129, 0.2); }
.source.delayed::before { background: var(--warn); }
.source.offline::before { background: var(--down); }
.msg { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

/* ---------- tooltip ---------- */
.tip {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--tip);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: no-preference) {
  .tfs button, .tb-btn, .tb-symbol, .drawtools button, .sidestrip button, .ranges button, .bb-btn { transition: background-color 0.12s; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner i { animation-duration: 2.4s; }
}

/* ---------- split screen (layout.js) ---------- */
.shell .stage, .shell .bottombar { display: none; }
/* the right panel is the shell's, beside all the charts; a chart only renders its content */
.embed .topbar, .embed .drawtools, .embed .sidestrip, .embed .sidepanel { display: none; }
/* a chart in a split screen: the legend already names the source, so the bottom bar keeps
   just the ranges, clock and scale buttons */
.embed .msg, .embed .source { display: none; }
.embed .ranges { min-width: 0; overflow: hidden; }
.embed .ranges button, .embed .bb-btn { padding: 0 5px; }
/* a chart's own header in a split screen (cTrader's): its symbol, timeframe and type */
.cellbar { display: none; }
.embed .cellbar { display: flex; flex-shrink: 0; align-items: center; gap: 2px; height: 30px; padding: 0 6px; border-bottom: 1px solid var(--border); background: var(--bg); }
.cellbar button { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.cellbar button:hover { background: var(--hover); }
.cellbar b { font-weight: 600; color: var(--strong); }
.cellbar .caret { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cellbar .cb-ico { display: inline-flex; }
.cellbar .sym-ico { width: 18px; height: 18px; }
.cellbar .sym-ico.pair img { width: 13px; height: 13px; }
.cellbar .sym-ico.mono { font-size: 10px; }
.cellbar .type-icon svg { width: 22px; height: 22px; }
.cb-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--border); }

/* Charts as rounded panels on the app's frame colour; the toolbars' 4px borders frame the other sides. */
.cells { flex: 1; display: grid; gap: 4px; padding-bottom: 4px; min-width: 0; min-height: 0; background: var(--border); }
.cells.layout-2h { grid-template-columns: 1fr 1fr; }
.cells.layout-2v { grid-template-rows: 1fr 1fr; }
.cells.layout-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cells.layout-3 .cell:first-child { grid-row: span 2; }
.cells.layout-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 6px; background: var(--bg); transition: box-shadow 0.15s ease; }
.cell iframe { display: block; width: 100%; height: 100%; border: 0; }
/* the active chart, the one the toolbars control: a thin accent ring with a soft halo */
.cell.active { box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px rgba(41, 98, 255, 0.22); }
.cell:not(.active):hover { box-shadow: 0 0 0 1px rgba(120, 123, 134, 0.45); }
.layout-menu { min-width: 280px; padding: 10px 12px; gap: 8px; }
.lm-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lm-grid { display: flex; gap: 6px; }
.menu .lm-grid button { display: grid; justify-items: center; gap: 2px; padding: 6px; border-radius: 6px; font-size: 11px; color: var(--muted); }
.menu .lm-grid button[aria-checked="true"] { color: var(--accent); background: var(--hover); }
.lm-grid svg { width: 34px; height: 34px; }
.lm-sync { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); cursor: pointer; }
.lm-sync input { margin: 0; accent-color: var(--accent); }
.lm-note { margin: 0; max-width: 270px; font-size: 12px; line-height: 1.45; color: var(--muted); white-space: normal; }

/* ---------- account (account.js): saved state, plan chip, account button and menu ---------- */
.sync-state { display: inline-grid; place-items: center; width: 26px; height: 34px; color: var(--muted); flex-shrink: 0; }
.sync-state svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sync-state.saving { color: var(--accent); }
.sync-state.error { color: var(--warn); }
.plan-chip { height: 26px; margin: 0 4px; padding: 0 10px; border: 1px solid var(--border); border-radius: 13px; background: none; color: var(--text); font-size: 12px; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.plan-chip:hover { background: var(--hover); }
.plan-chip.trial { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
.plan-chip.over { border-color: var(--down); background: var(--down); color: #fff; }
.account-btn { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 4px 0 2px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.account-btn:hover { filter: brightness(1.1); }
.account-menu { min-width: 260px; }
.am-head { display: grid; gap: 2px; padding: 6px 14px 4px; }
.am-head b { color: var(--strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.am-head span { color: var(--muted); font-size: 12px; }

/* payment dialog and paywall */
.pay-modal { z-index: 60; background: rgba(0, 0, 0, 0.6); }
.pay-card { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); }
.pay-body { display: grid; gap: 14px; padding: 16px; overflow-y: auto; }
.pay-lead { margin: 0; line-height: 1.5; }
.pay-lead.center { text-align: center; }
.pay-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pay-plan { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.pay-plan:hover { background: var(--hover); }
.pay-plan.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pay-plan span { color: var(--muted); font-size: 12px; }
.pay-plan b { color: var(--strong); font-size: 18px; font-variant-numeric: tabular-nums; }
.pay-plan small { color: var(--muted); font-size: 11px; }
.pay-methods { display: flex; gap: 6px; }
.pay-method { flex: 1; height: 34px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.pay-method.on { border-color: var(--accent); color: var(--accent); }
.pay-go { width: 100%; height: 40px; }
.pay-go:disabled { opacity: 0.6; cursor: wait; }
.pay-note { margin: 0; color: var(--muted); }
.pay-error { margin: 0; color: var(--down); }
.pay-logout { border: 0; background: none; color: var(--muted); cursor: pointer; }
.pay-logout:hover { color: var(--text); }
.pay-qr { display: grid; place-items: center; }
.pay-qr img { width: 220px; height: 220px; padding: 8px; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.pay-banks { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.pay-banks a { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border-radius: 6px; color: var(--text); font-size: 10.5px; line-height: 1.2; text-align: center; text-decoration: none; }
.pay-banks a:hover { background: var(--hover); }
.pay-banks img { width: 34px; height: 34px; border-radius: 8px; }
.pay-bank { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font: 13px/1.6 var(--font); white-space: pre-wrap; user-select: all; }
.pay-ref { margin: 0; }
.pay-ref b { font-size: 16px; color: var(--strong); letter-spacing: 0.04em; }
.pay-ref span { color: var(--muted); font-size: 12px; }
.pay-wait { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; }
.pay-wait i { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0; }
.pay-done { display: grid; justify-items: center; gap: 8px; padding: 12px 0; text-align: center; }
.pay-done p { margin: 0; color: var(--muted); }
.pay-check { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--up); color: #fff; font-size: 26px; }

/* ---------- sign-in page (login.html): one box for signing in and up, between our brand and the note ---------- */
body.auth-page, body.admin-page { display: block; overflow: auto; }
.auth { display: grid; justify-items: center; align-content: center; gap: 18px; min-height: 100%; padding: 32px 16px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--strong); }
.auth-brand img { width: 34px; height: 34px; border-radius: 8px; }
.auth-card { width: min(400px, 100%); overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--menu); box-shadow: var(--shadow); }
/* the sign-in page's chart (login-chart.js): behind everything, darker toward the card */
.auth-chart { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.8; }
.auth-chart::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10; /* over the chart's own canvases (they have z-indexes of their own) */
  /* clear around the card and the name above it, the chart showing toward the edges */
  background: radial-gradient(
    ellipse 62% 72% at 50% 47%,
    color-mix(in srgb, var(--bg) 95%, transparent) 0%,
    color-mix(in srgb, var(--bg) 86%, transparent) 40%,
    color-mix(in srgb, var(--bg) 35%, transparent) 74%,
    color-mix(in srgb, var(--bg) 5%, transparent) 100%
  );
}
.auth-page .auth { position: relative; z-index: 1; }
.auth-page:has(.auth-chart) .auth-card { background: color-mix(in srgb, var(--menu) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.auth-main { display: grid; gap: 16px; padding: 32px 40px; }
.auth-main h1 { margin: 0; color: var(--strong); font-size: 17px; font-weight: 700; text-align: center; }
.auth-main form { display: grid; gap: 8px; }
.auth-main code { padding: 0 4px; border-radius: 3px; background: var(--hover); font-size: 12px; }
.auth-sub { margin: -8px 0 4px; color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; text-wrap: balance; }
.auth-sub.small { margin: 0; font-size: 12px; }
.auth-socials { display: grid; gap: 8px; }
.auth-social { display: flex; align-items: center; justify-content: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.auth-social:hover:not(:disabled) { background: var(--hover); }
.auth-social:disabled { cursor: default; opacity: 0.7; }
.auth-social svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-label { color: var(--strong); font-size: 13px; font-weight: 600; }
.auth-input { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--strong); font: inherit; font-size: 13.5px; outline: none; }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.auth-input.bad, .auth-otp.bad span { border-color: var(--down); }
.auth-primary { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; margin-top: 10px; border: 0; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px color-mix(in srgb, var(--accent) 80%, #fff); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.auth-primary:hover:not(:disabled) { filter: brightness(1.08); }
.auth-primary:disabled { cursor: default; }
.auth-primary span { font-size: 10px; opacity: 0.85; }
.auth-spin { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; }
.auth-error { margin: 0; color: var(--down); font-size: 12.5px; line-height: 1.45; }
.auth-alert { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--down) 40%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--strong); font-size: 12.5px; line-height: 1.45; }
.auth-info { margin: 0; color: var(--up); font-size: 12.5px; text-align: center; }
.auth-ident { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 6px; color: var(--text); font-size: 13.5px; }
.auth-ident span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-icon { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.auth-icon:hover { background: var(--hover); color: var(--strong); }
.auth-icon svg { width: 14px; height: 14px; }
/* the code: one real input over six boxes that show its digits */
.auth-otp { position: relative; display: grid; grid-template-columns: repeat(6, 40px); justify-content: center; gap: 8px; }
.auth-otp input { position: absolute; inset: 0; width: 100%; border: 0; background: none; color: transparent; caret-color: transparent; font-size: 1px; outline: none; }
.auth-otp span { display: grid; place-items: center; height: 44px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--strong); font-size: 18px; font-weight: 600; pointer-events: none; }
.auth-otp span.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.auth-otp + .auth-error { text-align: center; }
.auth-resend { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.auth-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-cardfoot { margin: 0; padding: 14px 24px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--menu) 94%, var(--text)); color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; text-wrap: balance; }
.auth-cardfoot a { color: var(--text); }
.auth-foot { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-foot a { color: var(--muted); }
@media (max-width: 440px) {
  .auth-main { padding: 28px 20px; }
  .auth-otp { grid-template-columns: repeat(6, minmax(0, 40px)); gap: 6px; }
}

/* ---------- admin page (admin.html) ---------- */
/* chart series: three categorical slots, validated for each surface (dataviz validate_palette.js) */
.admin-page { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --grid: #2a2e39; --axis: #434651; }
:root[data-theme="light"] .admin-page { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --grid: #ebebeb; --axis: #c9ccd3; }
.adm-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.adm-top > b { color: var(--strong); font-size: 15px; }
.adm-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.adm-tabs a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.adm-tabs a:hover { color: var(--text); background: color-mix(in srgb, var(--hover) 60%, transparent); }
.adm-tabs a.on { background: var(--hover); color: var(--strong); }
.adm-back { color: var(--accent); text-decoration: none; white-space: nowrap; }
.adm { display: grid; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 16px; transition: opacity 0.15s; }
.adm.busy { opacity: 0.6; }
.adm a { color: var(--accent); }
.adm h2 { margin: 0 0 4px; color: var(--strong); font-size: 20px; overflow-wrap: anywhere; }
.adm h3 { margin: 0 0 10px; color: var(--strong); font-size: 14px; }
.adm p { margin: 0; }
.adm-muted { color: var(--muted); font-weight: 400; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.adm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adm-bar .ui-input { width: 260px; max-width: 100%; }
.adm-hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.adm-mini { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; }
.adm-mini:hover:not(:disabled) { background: var(--hover); }
.adm-mini:disabled { opacity: 0.4; cursor: default; }
.adm-mini[aria-pressed="true"] { background: var(--hover); color: var(--strong); }
.ui-btn.danger { border-color: color-mix(in srgb, var(--down) 60%, transparent); color: var(--down); }
.ui-btn.danger:hover { background: color-mix(in srgb, var(--down) 12%, transparent); }
.adm-seg { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 7px; }
.adm-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.adm-seg button[aria-pressed="true"] { background: var(--hover); color: var(--strong); font-weight: 600; }
.adm-back-link { text-decoration: none; }

/* stat tiles: label, value, change against the previous period, a line under it */
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.adm-tile { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; color: inherit; text-decoration: none; }
.adm a.adm-tile { color: inherit; }
.adm-tile.link:hover { border-color: var(--muted); }
.adm-tile-label { color: var(--muted); font-size: 12px; }
.adm-tile > b { color: var(--strong); font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.adm-tile-sub { color: var(--muted); font-size: 12px; line-height: 1.4; }
.adm-delta { font-size: 12px; color: var(--muted); }
.adm-delta.up { color: var(--up); }
.adm-delta.down { color: var(--down); }
.adm-delta span { color: var(--muted); }
.adm-dl-btn { display: inline-flex; align-items: center; justify-content: center; margin: 4px 0; text-decoration: none; white-space: nowrap; }
.adm .adm-dl-btn { color: var(--bg); }

.adm-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; }
.adm-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; gap: 16px; }
.adm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.adm-chart header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adm-chart h3 { margin: 0; }
.adm-figure { color: var(--muted); font-size: 12px; margin-top: 2px !important; }
.adm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; color: var(--text); font-size: 12px; }
.adm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend i { width: 10px; height: 10px; border-radius: 2px; }
.adm-legend i.line { width: 14px; height: 2px; border-radius: 1px; }
.adm-plotbox { margin-top: 10px; min-height: 190px; }
.adm-tablebox { margin-top: 10px; }
.adm-plot { display: block; overflow: visible; outline: none; }
.adm-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.adm-plot .grid { stroke: var(--grid); stroke-width: 1; }
.adm-plot .axis { stroke: var(--axis); stroke-width: 1; }
.adm-plot .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.adm-plot .hl { fill: var(--text); fill-opacity: 0.06; }
.adm-plot .cross { stroke: var(--muted); stroke-width: 1; }
.adm-plot .dot { stroke: var(--bg); stroke-width: 2; }
.adm-hbars { display: grid; gap: 10px; margin: 0; padding: 4px 0; list-style: none; }
.adm-hbars li { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; font-size: 12.5px; }
.adm-hbars div { display: flex; align-items: center; gap: 8px; }
.adm-hbars i { height: 14px; border-radius: 0 4px 4px 0; background: var(--s1); }
.adm-hbars b { color: var(--strong); font-weight: 600; font-variant-numeric: tabular-nums; }

/* the hover read-out: the value first and strong, the series after it, keyed by a short line */
.adm-tip { position: fixed; z-index: 20; min-width: 140px; max-width: 280px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--menu); box-shadow: var(--shadow); font-size: 12px; pointer-events: none; }
.adm-tip > b { display: block; margin-bottom: 4px; color: var(--muted); font-weight: 500; }
.adm-tip-row { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 6px; line-height: 1.6; }
.adm-tip-row i { width: 12px; height: 2px; border-radius: 1px; }
.adm-tip-row strong { color: var(--strong); font-variant-numeric: tabular-nums; }
.adm-tip-row span { color: var(--muted); }

/* what to look at: a status icon and its word, never the colour alone */
.adm-checks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.adm-check { display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.adm-check:last-child { border-bottom: 0; }
.adm-check b { color: var(--strong); font-weight: 600; }
.adm-check p { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.adm-check-level { margin-left: 8px; color: var(--muted); font-size: 11px; }
.adm-check-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; }
.adm-check.bad .adm-check-icon { background: var(--down); }
.adm-check.warn .adm-check-icon { background: var(--warn); color: #131722; }
.adm-check.info .adm-check-icon { background: var(--accent); }
.adm-check.ok .adm-check-icon { background: var(--up); }
.adm-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 12.5px; }
.adm-dl dt { color: var(--muted); }
.adm-dl dd { margin: 0; overflow-wrap: anywhere; }

/* tables */
.adm-scroll { overflow-x: auto; }
.adm-scroll.short { max-height: 340px; overflow-y: auto; }
.adm-scroll.tall { max-height: 640px; overflow-y: auto; }
.adm-scroll thead th { position: sticky; top: 0; background: var(--bg); }
.adm-card .adm-scroll thead th { background: var(--bg); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-table th { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 500; text-align: left; white-space: nowrap; }
.adm-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-table tbody tr:hover td { background: color-mix(in srgb, var(--hover) 50%, transparent); }
.adm-table.clickable tbody tr { cursor: pointer; }
.adm-table.clickable tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-table.db td { max-width: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; overflow-wrap: anywhere; }
.adm-table td.masked { color: var(--muted); font-style: italic; }
.adm-table td.null { color: var(--muted); }
.adm-table td.cut .adm-mini { height: 22px; margin-left: 4px; font-family: var(--font); }
.adm-note { max-width: 260px; color: var(--muted); overflow-wrap: anywhere; }
.adm-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.adm-sort:hover { color: var(--strong); }
.adm-pager { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.adm-schema summary { cursor: pointer; color: var(--muted); margin-top: 8px; }
.adm-schema .adm-table { margin-top: 8px; }
.adm-pre { max-height: 60vh; margin: 8px 0 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-empty { padding: 12px; color: var(--muted); text-align: center; }
.adm-empty.big { padding: 48px 12px; font-size: 14px; }
.adm-acts { white-space: nowrap; }
.adm-acts button { height: 26px; margin-right: 4px; padding: 0 8px; border: 1px solid var(--border); border-radius: 5px; background: none; cursor: pointer; }
.adm-acts button:hover { background: var(--hover); }
.adm-state { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; white-space: nowrap; background: var(--hover); }
.adm-state.paid { background: color-mix(in srgb, var(--up) 20%, transparent); color: var(--up); }
.adm-state.trial, .adm-state.pending { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.adm-state.over, .adm-state.cancelled { background: color-mix(in srgb, var(--down) 15%, transparent); color: var(--down); }
.adm-state.admin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.adm-state.muted { color: var(--muted); }
.adm-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #131722; font-size: 11px; font-weight: 600; }
.adm-badge.bad { background: var(--down); color: #fff; }
.adm-counts { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.adm-counts li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.adm-counts li span { min-width: 0; overflow-wrap: anywhere; }
.adm-counts b { color: var(--strong); font-variant-numeric: tabular-nums; }
/* the deploy tab's files (admin.js): a count of each kind, then the list in a box of its own */
.adm-dep-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0; font-size: 12.5px; }
.adm-dep-files { max-height: 340px; overflow: auto; padding-right: 6px; }
.adm-deploy { display: grid; gap: 16px; }
.adm-deploy .adm-tile b { font-size: 19px; overflow-wrap: anywhere; } /* an address, not a number */

/* one user */
.adm-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.adm-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-head-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-strip { display: grid; grid-template-columns: repeat(90, minmax(3px, 1fr)); gap: 2px; margin-bottom: 6px; }
.adm-strip i { height: 22px; border-radius: 2px; background: var(--hover); }
.adm-strip i.on { background: var(--s1); }

/* errors: grouped, the newest first */
.adm-errors { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adm-errors > li { border: 1px solid var(--border); border-radius: 8px; }
.adm-errors > li.resolved { opacity: 0.65; }
.adm-errors summary { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.adm-errors summary::-webkit-details-marker { display: none; }
.adm-err-src { padding: 2px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; background: var(--hover); color: var(--text); }
.adm-err-msg { display: grid; gap: 2px; min-width: 0; }
.adm-err-msg b { color: var(--strong); font-weight: 600; overflow-wrap: anywhere; }
.adm-err-msg .mono { color: var(--muted); overflow-wrap: anywhere; }
.adm-err-n { display: grid; justify-items: end; font-size: 12px; white-space: nowrap; }
.adm-err-n b { color: var(--strong); }
.adm-err-n span { color: var(--muted); }
.adm-spark rect { fill: var(--grid); }
.adm-spark rect.on { fill: var(--s2); }
.adm-err-body { display: grid; gap: 10px; padding: 0 12px 12px; }

/* dialog and toast */
.adm-dlg { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--menu); color: var(--text); box-shadow: var(--shadow); }
.adm-dlg.wide { width: min(860px, calc(100vw - 32px)); }
.adm-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.adm-dlg h2 { margin: 0; padding: 16px 18px 0; color: var(--strong); font-size: 15px; overflow-wrap: anywhere; }
.adm-dlg-body { display: grid; gap: 12px; padding: 14px 18px; line-height: 1.5; }
.adm-dlg-body p { margin: 0; }
.adm-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.adm-field { display: grid; gap: 6px; }
.adm-field span { color: var(--muted); font-size: 12px; }
.adm-field .ui-input { width: 100%; }
.adm-toast { position: fixed; bottom: 20px; left: 50%; z-index: 30; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 8px; background: var(--strong); color: var(--bg); box-shadow: var(--shadow); font-weight: 600; }
.adm-toast.bad { background: var(--down); color: #fff; }

/* ---------- the journal's report (journal.html), on the admin page's pieces ---------- */
.jp-filters { position: sticky; top: 48px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.jp-filters .ui-select { min-width: 0; height: 32px; }
.adm-table td.up, .adm-tile b.up, .jp-calsum b.up, .jp-netcell b.up, .jp-dhead b.up, .jp-plan .up { color: var(--up); }
.adm-table td.down, .adm-tile b.down, .jp-calsum b.down, .jp-netcell b.down, .jp-dhead b.down, .jp-plan .down { color: var(--down); }
.jp-kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.jp-hero { grid-column: span 2; }
.jp-hero > b { font-size: 34px; letter-spacing: -0.01em; }
.jp-pair { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 19px !important; }
.jp-pair span { white-space: nowrap; }
.jp-pair .up { color: var(--up); }
.jp-pair .down { color: var(--down); }
.jp-meter { display: block; height: 4px; margin: 4px 0 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.jp-meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.jp-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.jp-charts [data-chart="equity"] { grid-column: 1 / -1; }
.adm-card h3 .jp-more { float: right; font-weight: 400; }
.jp-insights { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jp-insights li { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; font-size: 13px; line-height: 1.5; }
.jp-insights li > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hover); color: var(--muted); font-size: 11px; font-weight: 700; }
.jp-insights li.up > span { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
.jp-insights li.down > span { background: color-mix(in srgb, var(--down) 15%, transparent); color: var(--down); }
.jp-insights li.warn > span { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.jp-insights b { color: var(--strong); }
.jp-noted { color: var(--muted); }
.jp-tags { color: var(--accent); font-size: 11.5px; }
.jp-trades td { white-space: nowrap; }
.jp-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.adm .jp-btn.primary, .jp-drawer .jp-btn.primary { color: var(--bg); }
.jp-empty p { margin-top: 8px; line-height: 1.6; }
/* the month: each day's P&L, tinted by its sign and size; the week's total at the end of the row */
.jp-calhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.jp-calnav { display: flex; align-items: center; gap: 8px; }
.jp-calnav h3 { margin: 0 6px; min-width: 150px; text-align: center; }
.jp-calsum { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 12px; }
.jp-calsum b { margin-left: 4px; color: var(--strong); font-size: 13px; }
.jp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(96px, 0.9fr); gap: 4px; }
.jp-wd { padding: 4px 6px; color: var(--muted); font-size: 11.5px; }
.jp-day { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 76px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.jp-day:disabled { cursor: default; }
.jp-day.out { border-style: dashed; opacity: 0.35; }
.jp-day.has:hover { border-color: var(--muted); }
.jp-day.on { outline: 2px solid var(--accent); outline-offset: -1px; }
.jp-dnum { color: var(--muted); font-size: 11.5px; }
.jp-day.today .jp-dnum { color: var(--accent); font-weight: 700; }
.jp-day b, .jp-week b { overflow: hidden; color: var(--strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.jp-day small, .jp-week small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.jp-week { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 6px 8px; border-radius: 6px; background: var(--hover); }
.jp-week span { color: var(--muted); font-size: 11px; }
.jp-week.up b { color: var(--up); }
.jp-week.down b { color: var(--down); }
/* the cuts: a diverging bar of each group's P&L beside the figure */
.jp-reports { columns: 460px 2; column-gap: 16px; } /* cards of different heights pack without gaps */
.jp-reports > .adm-card { break-inside: avoid; margin-bottom: 16px; }
.jp-group th, .jp-group td { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.jp-group td:first-child { white-space: normal; }
.jp-netcell { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.jp-bar { flex: 1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--hover); }
.jp-bar i { display: block; height: 100%; border-radius: 4px; }
.jp-bar i.up { background: var(--up); }
.jp-bar i.down { background: var(--down); }
.jp-netcell b { min-width: 76px; color: var(--strong); text-align: right; font-variant-numeric: tabular-nums; }
/* one trade, in a panel at the right */
.jp-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10; display: grid; align-content: start; gap: 14px; width: min(580px, 100vw); overflow-y: auto; padding: 16px 18px 28px; border-left: 1px solid var(--border); background: var(--menu); box-shadow: var(--shadow); }
.jp-dhead { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; }
.jp-dhead h2 { margin: 0 0 4px; color: var(--strong); font-size: 17px; }
.jp-dhead p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.jp-mini { min-height: 300px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; }
.jp-plan { margin: 0; }
.jp-sec h3 { margin: 0 0 8px; color: var(--strong); font-size: 13px; }
.jp-rules { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.jp-rules .ui-check { align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.jp-taglist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jp-tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 9px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 12px; }
.jp-tag button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.jp-tag button:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.jp-taglist .ui-input { width: 200px; height: 30px; }
.jp-drawer textarea { min-height: 110px; line-height: 1.5; }
.jp-dacts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .jp-filters { top: 48px; padding: 8px 12px; }
  .jp-charts { grid-template-columns: 1fr; }
  .jp-reports { columns: 1; }
  .jp-hero > b { font-size: 28px; }
  .jp-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .jp-week, .jp-cal .jp-wd:nth-child(8) { display: none; }
  .jp-day { min-height: 52px; padding: 4px; }
  .jp-day small { display: none; }
  .jp-day b { font-size: 10.5px; }
  .jp-drawer { padding: 14px 12px 24px; }
}

/* ---------- the privacy policy and the terms (privacy.html, terms.html) ---------- */
body.doc-page { display: block; overflow: auto; }
.doc { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; font-size: 14.5px; line-height: 1.7; }
.doc h1 { margin: 12px 0 4px; color: var(--strong); font-size: 26px; }
.doc h2 { margin: 28px 0 8px; color: var(--strong); font-size: 16px; }
.doc p, .doc ul { margin: 0 0 10px; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc b { color: var(--strong); }
.doc a { color: var(--accent); }
.doc-nav { color: var(--muted); font-size: 13px; }
.doc-date { color: var(--muted); font-size: 12.5px; }

/* ---------- the user's settings (settings.html), on the admin page's pieces ---------- */
.adm.narrow { max-width: 920px; }
.set-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.set-btn { display: inline-flex; align-items: center; text-decoration: none; }
.adm .set-btn.primary { color: var(--bg); }
.set-danger { border-color: color-mix(in srgb, var(--down) 45%, var(--border)); }
.set-code { letter-spacing: 0.2em; font-size: 16px; }
.adm-dlg-err { margin: 0; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); font-size: 12.5px; }
/* two-step sign-in: the QR beside numbered steps, then the code */
.adm-dlg.tfa-dlg { width: min(580px, calc(100vw - 32px)); }
.tfa { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 20px; }
.tfa-qr { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; line-height: 0; }
.tfa-qr svg { display: block; width: 164px; height: 164px; }
.tfa-steps { display: grid; gap: 18px; min-width: 0; }
.tfa-step { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; min-width: 0; }
.tfa-step > div { min-width: 0; }
.tfa-step b { display: block; margin-bottom: 3px; color: var(--strong); font-weight: 600; }
.tfa-step p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.tfa-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 12px; font-weight: 700; }
.tfa-key { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.tfa-key code { flex: 1; min-width: 0; color: var(--strong); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }
.tfa-code { padding-top: 16px; border-top: 1px solid var(--border); }
.tfa-code .auth-otp { justify-content: start; margin-top: 12px; }
.tfa-done { display: flex; align-items: center; gap: 12px; }
.tfa-done b { display: block; color: var(--strong); }
.tfa-done p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.tfa-ok { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--up); color: #fff; font-size: 18px; font-weight: 700; }
.tfa-warn { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12.5px; line-height: 1.5; }
.tfa-warn b { color: var(--strong); }
.tfa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 0; padding: 14px 16px 14px 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 12px; }
.tfa-codes code { color: var(--strong); font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; user-select: all; }
.tfa-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 540px) {
  .tfa { grid-template-columns: 1fr; justify-items: center; }
  .tfa-steps { justify-self: stretch; }
  .tfa-code .auth-otp { justify-content: center; }
  .tfa-codes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .adm-top { gap: 10px; padding: 0 10px; }
  .adm-top > b { display: none; }
  .adm { padding: 12px; }
  .adm-charts, .adm-split { grid-template-columns: 1fr; }
  .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-errors summary { grid-template-columns: auto 1fr auto; }
  .adm-spark { display: none; }
  .adm-bar .ui-input { width: 100%; }
}

/* ---------- language (i18n.js): English | Монгол ---------- */
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
.lang-switch button, .menu .lang-switch button { display: inline-block; padding: 3px 10px; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.lang-switch button:hover, .menu .lang-switch button:hover { background: none; color: var(--text); }
.lang-switch button[aria-pressed="true"], .menu .lang-switch button[aria-pressed="true"] { background: var(--hover); color: var(--strong); font-weight: 600; }
/* the top bar's EN | MN (i18n.js) */
.tb-lang { display: inline-flex; align-items: center; margin: 0 2px; }
.lang-switch.short button { padding: 3px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.am-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; color: var(--text); }
.auth-lang { display: flex; justify-content: center; margin: 0 0 6px; }