/* ZeroSpread Chart Workspace — semantic tokens + components.
   Typography: Tajawal only (400/500/700). Numbers: tabular, Latin digits. */

.zs-ws {
  --zs-bg: #ffffff;
  --zs-shell: #e9ecf2;
  --zs-surface: #ffffff;
  --zs-hover: #f0f3fa;
  --zs-pressed: #e3e7ef;
  --zs-border: #e0e3eb;
  --zs-border-strong: #d1d4dc;
  --zs-text: #131722;
  --zs-text-2: #434651;
  --zs-muted: #6a6d78;
  --zs-faint: #9598a1;
  --zs-link: #2962ff;
  --zs-invert-bg: #131722;
  --zs-invert-text: #ffffff;
  --zs-bull: #089981;
  --zs-bear: #f23645;
  --zs-brand: #a3ff12;
  --zs-focus: #2962ff;
  --zs-shadow: 0 2px 4px rgba(19, 23, 34, 0.08), 0 8px 24px rgba(19, 23, 34, 0.12);
  --zs-shadow-sm: 0 1px 3px rgba(19, 23, 34, 0.12);
  --zs-top-h: 40px;
  --zs-left-w: 48px;
  --zs-bottom-h: 38px;
  --zs-rail-w: 46px;
  --zs-gap: 4px;

  position: relative;
  display: grid;
  grid-template-rows: var(--zs-top-h) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--zs-shell);
  color: var(--zs-text);
  font-family: var(--zs-font-institutional);
  font-size: 14px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  gap: var(--zs-gap);
}
.zs-ws[data-theme='dark'] {
  --zs-bg: #0f1115; --zs-shell: #050608; --zs-surface: #16181d; --zs-hover: #20232a; --zs-pressed: #2a2e39;
  --zs-border: #2a2e39; --zs-border-strong: #363a45; --zs-text: #d1d4dc; --zs-text-2: #b2b5be; --zs-muted: #8a8f9a; --zs-faint: #6a6f7c;
  --zs-invert-bg: #e6e8ec; --zs-invert-text: #0f1115;
}
.zs-ws *, .zs-ws *::before, .zs-ws *::after { box-sizing: border-box; }
.zs-ws button { font-family: inherit; color: inherit; }
.zs-num, .zs-ws .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.zs-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top toolbar ---------- */
.zs-top {
  display: flex; align-items: center; background: var(--zs-bg); padding: 0 6px; gap: 2px; min-width: 0;
  border-radius: 0 0 4px 4px;
}
.zs-top-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.zs-top-spacer { flex: 1; }
/* wide screens: the scroll wrapper is not a box; its controls sit in the toolbar itself. The alert control comes after
   the instrument controls and before the spacer, as it always has (it is last in the markup so it can stay outside the
   scrolling part on narrow screens). */
.zs-top-scroll { display: contents; }
.zs-top-alert { order: 1; }
.zs-top-scroll > .zs-top-spacer, .zs-top-scroll > .zs-top-end { order: 2; }
.zs-sep { width: 1px; height: 20px; background: var(--zs-border); margin: 0 4px; flex: none; }
.zs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 7px;
  border: 0; border-radius: 4px; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; flex: none;
  color: var(--zs-text); line-height: 1;
}
.zs-btn:hover { background: var(--zs-hover); }
.zs-btn:active { background: var(--zs-pressed); }
.zs-btn[aria-pressed='true'], .zs-btn.is-active { background: var(--zs-hover); }
.zs-btn[disabled] { opacity: 0.35; cursor: default; background: transparent; }
.zs-btn:focus-visible, .zs-tool:focus-visible, .zs-row:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
.zs-btn svg { flex: none; }
.zs-btn.icon { padding: 0; width: 32px; }
.zs-btn.caret { min-width: 18px; width: 18px; padding: 0; color: var(--zs-muted); }
.zs-iv-menu { gap: 2px; padding: 0 6px 0 8px; }
.zs-iv-menu svg { color: var(--zs-muted); }
/* host slot for the page's alert button: its button is a toolbar item like the others */
.zs-alert-slot { display: contents; }
.zs-top-alert { display: flex; align-items: center; flex: none; }
.zs-top-fixed { display: flex; align-items: center; flex: none; position: relative; z-index: 2; background: var(--zs-bg); }
.zs-bottom-pin { display: flex; align-items: center; flex: none; }
.zs-alert-btn { position: relative; }
.zs-alert-btn.is-done { color: var(--zs-bull); }
.zs-alert-btn .zs-count-badge { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.zs-alert-btn.is-error::after {
  content: ''; position: absolute; top: 6px; inset-inline-end: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--zs-bear); box-shadow: 0 0 0 2px var(--zs-bg);
}
.zs-btn.outline { border: 1px solid var(--zs-border); height: 30px; }
.zs-btn.primary { background: var(--zs-invert-bg); color: var(--zs-invert-text); border-radius: 16px; padding: 0 14px; }
.zs-btn.primary:hover { opacity: 0.9; }
.zs-symbol-btn { font-weight: 700; font-size: 14px; padding: 0 8px; gap: 6px; }
.zs-symbol-btn .zs-tk { max-width: 140px; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.zs-iv { font-weight: 500; font-size: 14px; min-width: 32px; padding: 0 6px; }
.zs-iv.is-active { background: var(--zs-hover); }
.zs-btn.zs-save { height: 34px; }
.zs-save-state { font-size: 11px; color: var(--zs-muted); font-weight: 400; line-height: 1; }

/* ---------- body ---------- */
.zs-body { display: grid; grid-template-columns: var(--zs-left-w) minmax(0, 1fr) auto; gap: var(--zs-gap); min-height: 0; direction: ltr; position: relative; }
.zs-center { display: grid; grid-template-rows: minmax(0, 1fr) var(--zs-bottom-h); min-width: 0; min-height: 0; background: var(--zs-bg); border-radius: 4px; overflow: hidden; }
.zs-charts { display: grid; min-height: 0; min-width: 0; gap: 1px; background: var(--zs-border); }
/* columns × rows come from the layout (layouts.ts): 1, 2, 2v, 4 (2×2), 6 (3×2), 8 (4×2), 9 (3×3), 12 (4×3) */
.zs-charts { grid-template-columns: repeat(var(--zs-cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--zs-rows, 1), minmax(0, 1fr)); }
/* phones too narrow for 2 × 2: one chart under another at a readable height, the stack scrolls */
.zs-charts[data-mode='stack'] { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.zs-charts[data-mode='stack'] > .zs-panel { flex: none; height: var(--zs-stack-h, 260px); }
.zs-charts[data-mode='stack'] .zs-canvas-host { touch-action: pan-y; }
.zs-charts[data-maxed] { display: grid; overflow: hidden; }
.zs-charts[data-maxed] > .zs-panel { height: auto; }
.zs-panel { position: relative; min-width: 0; min-height: 0; background: var(--zs-bg); }
.zs-panel[hidden] { display: none; }
/* the chart the toolbar acts on: a clear 2 px outline in the accent colour */
.zs-panel.is-active-panel::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--zs-link); pointer-events: none; z-index: 30; }
.zs-charts[data-maxed] > .zs-panel.is-active-panel::after { border-width: 0; }
/* show one chart alone / back to the layout: top corner of the plot, beside the price axis */
.zs-panel-max { position: absolute; top: 6px; right: calc(var(--zs-paxis, 56px) + 6px); z-index: 32; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 6px; border: 1px solid var(--zs-border); background: var(--zs-bg); color: var(--zs-muted); cursor: pointer; opacity: .9; padding: 0; }
.zs-panel-max::before { content: ''; position: absolute; inset: -7px; }
.zs-panel-max:hover, .zs-panel-max:focus-visible { color: var(--zs-text); opacity: 1; border-color: var(--zs-link); }
.zs-panel-max[aria-pressed='true'] { color: var(--zs-link); border-color: var(--zs-link); }

/* layout menu */
.zs-layout-btn { gap: 6px; }
.zs-layout-btn .zs-layout-thumb rect { fill: none; stroke: currentColor; stroke-width: 1.6; }
.zs-layout-btn .zs-layout-thumb rect.zs-lt-first { fill: currentColor; fill-opacity: .18; }

.zs-layout-picker { padding: 10px 10px 8px; display: grid; gap: 10px; }
.zs-lp-title { font-size: 14px; font-weight: 600; color: var(--zs-text); padding: 0 2px; }
.zs-lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.zs-lp-opt { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 76px; padding: 8px 4px 6px; border-radius: 8px; border: 1px solid var(--zs-border);
  background: var(--zs-bg); color: var(--zs-muted); cursor: pointer; font: inherit; text-align: center; }
.zs-lp-opt:hover:not(:disabled), .zs-lp-opt:focus-visible { border-color: var(--zs-link); color: var(--zs-text); }
.zs-lp-opt.is-on { border: 2px solid var(--zs-link); color: var(--zs-text); padding: 7px 3px 5px; }
.zs-lp-opt:disabled { cursor: not-allowed; opacity: .55; }
.zs-layout-thumb rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.zs-layout-thumb.is-on rect { stroke: var(--zs-link); }
.zs-layout-thumb.is-on rect.zs-lt-first { fill: var(--zs-link); fill-opacity: .25; }
.zs-lp-name { font-size: 12px; line-height: 1.3; }
.zs-lp-why { font-size: 11px; line-height: 1.25; color: var(--zs-muted); }
.zs-lp-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--zs-muted); padding: 6px 8px; border-radius: 6px; background: var(--zs-hover); }
.zs-lp-sync { display: grid; gap: 2px; border-top: 1px solid var(--zs-border); padding-top: 8px; }
.zs-lp-sub { font-size: 12px; color: var(--zs-muted); padding: 0 2px 4px; }
.zs-lp-switch { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--zs-text); }
.zs-lp-switch:hover { background: var(--zs-hover); }
.zs-lp-switch input { width: 18px; height: 18px; accent-color: var(--zs-link); margin: 0; flex: none; }
.zs-canvas-host { position: absolute; inset: 0; outline: none; }
.zs-canvas-host:focus-visible { box-shadow: inset 0 0 0 2px var(--zs-focus); }

/* ---------- left drawing toolbar ---------- */
.zs-left { background: var(--zs-bg); display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; border-radius: 0 4px 4px 0; }
.zs-left::-webkit-scrollbar { display: none; }
.zs-left-sep { width: 32px; height: 1px; background: var(--zs-border); margin: 6px 0; flex: none; }
.zs-toolwrap { position: relative; display: flex; align-items: center; flex: none; }
.zs-tool {
  width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; cursor: pointer; color: var(--zs-text);
  padding: 0; line-height: 0;
}
.zs-tool svg {
  width: 28px; height: 28px; flex: none; display: block;
  /* full-vector sharpness — no soft scale/transform */
  transform: none; shape-rendering: geometricPrecision; overflow: visible;
}
.zs-tool:hover { background: var(--zs-hover); }
.zs-tool.is-active { background: var(--zs-hover); color: var(--zs-text); }
.zs-tool.is-on { background: var(--zs-invert-bg); color: var(--zs-invert-text); }
.zs-tool-caret {
  position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 10px; height: 20px; border: 0; background: transparent; padding: 0;
  display: grid; place-items: center; color: var(--zs-faint); cursor: pointer; opacity: 0; transition: opacity 0.12s;
}
.zs-toolwrap:hover .zs-tool-caret, .zs-tool-caret[aria-expanded='true'] { opacity: 1; }
.zs-tool-caret:hover { color: var(--zs-text); }

/* ---------- popovers / menus / flyouts ---------- */
.zs-pop {
  position: fixed; z-index: 1000; background: var(--zs-surface); border-radius: 6px; box-shadow: var(--zs-shadow); border: 1px solid var(--zs-border);
  padding: 6px 0; min-width: 180px; max-height: calc(100vh - 16px); overflow-y: auto; color: var(--zs-text); font-family: var(--zs-font-institutional);
  animation: zs-pop-in 0.08s ease-out;
}
@keyframes zs-pop-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.zs-menu-title { padding: 6px 16px 6px; font-size: 11px; font-weight: 500; color: var(--zs-muted); text-transform: uppercase; letter-spacing: 0; }
.zs-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 0 16px; border: 0; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--zs-text); text-align: start; white-space: nowrap;
}
.zs-row:hover, .zs-row.is-kb { background: var(--zs-hover); }
.zs-row.is-selected { background: var(--zs-invert-bg); color: var(--zs-invert-text); border-radius: 4px; }
.zs-flyout .zs-row { min-height: 40px; margin: 0 6px; width: calc(100% - 12px); border-radius: 4px; padding: 0 10px; }
.zs-row[aria-disabled='true'] { opacity: 0.4; cursor: default; }
.zs-row .zs-row-icon { width: 24px; display: grid; place-items: center; flex: none; color: inherit; }
.zs-row .zs-row-label { flex: 1; }
.zs-row .zs-row-hint { color: var(--zs-muted); font-size: 12px; direction: ltr; }
.zs-row.is-selected .zs-row-hint { color: inherit; opacity: 0.7; }
.zs-row .zs-row-sub { color: var(--zs-faint); }
.zs-menu-sep { height: 1px; background: var(--zs-border); margin: 6px 0; }
.zs-danger { color: var(--zs-bear) !important; }

/* tooltip */
.zs-tip {
  position: fixed; z-index: 1100; background: var(--zs-invert-bg); color: var(--zs-invert-text); font-size: 12px; font-weight: 500; line-height: 1.3; padding: 5px 8px;
  border-radius: 4px; pointer-events: none; white-space: nowrap; font-family: var(--zs-font-institutional);
}
.zs-tip kbd { font-family: inherit; opacity: 0.7; margin-inline-start: 8px; direction: ltr; display: inline-block; }

/* ---------- modal ---------- */
.zs-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(19, 23, 34, 0.35); display: grid; place-items: center; padding: 16px; }
.zs-modal {
  background: var(--zs-surface); border-radius: 10px; box-shadow: var(--zs-shadow); display: flex; flex-direction: column; max-height: min(700px, calc(100vh - 32px));
  width: 100%; overflow: hidden; font-family: var(--zs-font-institutional); color: var(--zs-text);
}
.zs-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.zs-modal-title { font-size: 20px; font-weight: 700; margin: 0; }
.zs-x { width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--zs-text); }
.zs-x:hover { background: var(--zs-hover); }
.zs-search {
  display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 20px; padding: 0 10px; border: 1px solid var(--zs-border-strong); border-radius: 8px;
}
.zs-search:focus-within { border-color: var(--zs-text); }
.zs-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--zs-text); min-width: 0; }
.zs-search.flat { border: 0; border-bottom: 1px solid var(--zs-border); border-radius: 0; margin: 0; padding: 0 20px; height: 44px; }
.zs-chips { display: flex; gap: 6px; padding: 12px 20px 8px; flex-wrap: wrap; }
.zs-chip { height: 30px; padding: 0 12px; border-radius: 16px; border: 0; background: var(--zs-hover); font-size: 14px; font-weight: 500; cursor: pointer; }
.zs-chip:hover { background: var(--zs-pressed); }
.zs-chip[aria-pressed='true'] { background: var(--zs-invert-bg); color: var(--zs-invert-text); }
.zs-list-head { display: flex; justify-content: space-between; padding: 8px 20px; font-size: 11px; font-weight: 500; color: var(--zs-muted); text-transform: uppercase; border-bottom: 1px solid var(--zs-border); }
.zs-list { overflow-y: auto; flex: 1; min-height: 0; }
.zs-sym-row {
  display: grid; grid-template-columns: 28px 96px 1fr auto; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; cursor: pointer; border-bottom: 1px solid var(--zs-border);
  width: 100%; border-inline: 0; border-top: 0; background: transparent; text-align: start; font: inherit;
}
.zs-sym-row:hover, .zs-sym-row.is-kb { background: var(--zs-hover); }
.zs-sym-row.is-kb { box-shadow: inset 0 0 0 1px var(--zs-text); border-radius: 4px; }
.zs-sym-label { display: contents; }
.zs-sym-tk { color: var(--zs-link); font-weight: 500; font-size: 14px; direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-sym-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-sym-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.zs-sym-meta .zs-sym-type { color: var(--zs-muted); font-size: 12px; }
.zs-avatar { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--zs-text); color: var(--zs-bg); flex: none; direction: ltr; }
/* ---------- asset logos (AssetLogo.tsx) ---------- */
.zs-logo { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; direction: ltr; line-height: 1; }
/* real logos are drawn for light backgrounds: keep them on a white disc in both themes */
.zs-logo-img { background: #fff; box-shadow: inset 0 0 0 1px rgba(19, 23, 34, 0.08); }
.zs-ws[data-theme='dark'] .zs-logo-img { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.zs-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zs-logo-img.is-pad img { width: 74%; height: 74%; }
/* loading: the mark shows; the image loads unseen on top and replaces it on load */
.zs-logo.is-loading img { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.zs-logo-img.is-dark, .zs-ws[data-theme='dark'] .zs-logo-img.is-dark { background: #131722; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
/* ZeroSpread mark: no genuine logo exists (or none loaded) — the asset's own letters, class-tinted */
.zs-logo-mark {
  --zs-logo-tone: #2962ff;
  font-weight: 700; letter-spacing: -0.02em; font-family: var(--zs-font-institutional);
  color: color-mix(in srgb, var(--zs-logo-tone) 78%, var(--zs-text));
  background: linear-gradient(140deg, color-mix(in srgb, var(--zs-logo-tone) 24%, var(--zs-surface)), color-mix(in srgb, var(--zs-logo-tone) 9%, var(--zs-surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zs-logo-tone) 38%, transparent);
}
.zs-logo-mark[data-cls='etf'] { --zs-logo-tone: #7e57c2; }
.zs-logo-mark[data-cls='crypto'] { --zs-logo-tone: #f59e0b; }
.zs-logo-mark[data-cls='forex'] { --zs-logo-tone: #0ea5e9; }
.zs-logo-mark[data-cls='commodity'] { --zs-logo-tone: #b8860b; }
.zs-logo-mark[data-cls='index'] { --zs-logo-tone: #089981; }
.zs-logo-mark[data-cls='future'] { --zs-logo-tone: #64748b; }
/* forex: base flag in front (top-left), quote flag behind (bottom-right) — same order in RTL */
.zs-logo-pair { overflow: visible; border-radius: 0; }
.zs-logo-pair img { position: absolute; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--zs-surface); background: var(--zs-hover); }
.zs-logo-pair .b { left: 0; top: 0; z-index: 1; }
.zs-logo-pair .q { right: 0; bottom: 0; }
.zs-etf-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: #7e57c2; background: color-mix(in srgb, #7e57c2 14%, transparent); direction: ltr; flex: none;
}
.zs-ws[data-theme='dark'] .zs-etf-badge { color: #b39ddb; }
.zs-etf-note { font-size: 12px; line-height: 18px; color: var(--zs-muted); padding-inline-start: 30px; max-width: 560px; }
.zs-chip-n { margin-inline-start: 6px; font-size: 12px; font-weight: 500; opacity: 0.72; font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }
.zs-chip[data-empty] { opacity: 0.55; }
.zs-cmp-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zs-footer-hint .zs-count { font-weight: 500; color: var(--zs-text-2); font-variant-numeric: tabular-nums; }
.zs-cmp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--zs-border); cursor: pointer; width: 100%; background: transparent; border-inline: 0; border-top: 0; font: inherit; text-align: start; }
.zs-cmp-row:hover, .zs-cmp-row.is-kb { background: var(--zs-hover); }
.zs-cmp-row .t { color: var(--zs-link); font-weight: 500; direction: ltr; }
.zs-cmp-row .d { color: var(--zs-muted); font-size: 12px; margin-top: 2px; }
.zs-footer-hint { padding: 12px; text-align: center; font-size: 12px; color: var(--zs-muted); background: var(--zs-hover); }
.zs-empty { padding: 40px 20px; text-align: center; color: var(--zs-muted); font-size: 14px; display: grid; gap: 8px; justify-items: center; }
.zs-empty-mark { width: 56px; height: 56px; border-radius: 12px; background: var(--zs-hover); display: grid; place-items: center; color: var(--zs-faint); }
.zs-ind-row { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 20px; cursor: pointer; font-size: 14px; border: 0; width: 100%; background: transparent; text-align: start; font: inherit; }
.zs-ind-row:hover, .zs-ind-row.is-kb { background: var(--zs-hover); }
.zs-ind-row .src { font-size: 11px; color: var(--zs-muted); }
.zs-ind-cat { padding: 12px 20px 4px; font-size: 11px; font-weight: 500; color: var(--zs-muted); text-transform: uppercase; }

/* ---------- legend (inside chart) ---------- */
.zs-legend { position: absolute; left: 8px; top: 6px; z-index: 5; pointer-events: none; direction: ltr; font-size: 13px; max-width: calc(100% - 90px); }
.zs-legend-line { display: flex; align-items: center; gap: 6px; height: 22px; white-space: nowrap; pointer-events: auto; width: max-content; max-width: 100%; }
.zs-legend-title { font-size: 14px; font-weight: 500; color: var(--zs-text); display: inline-flex; gap: 4px; align-items: center; cursor: pointer; padding: 0 4px; margin-left: -4px; border-radius: 4px; border: 1px solid transparent; }
.zs-legend-title:hover { border-color: var(--zs-border); }
.zs-legend .ohlc { display: inline-flex; gap: 8px; font-size: 12px; }
.zs-legend .ohlc b { font-weight: 400; color: var(--zs-text); margin-right: 1px; }
.zs-legend .up { color: var(--zs-bull); }
.zs-legend .down { color: var(--zs-bear); }
.zs-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.zs-quote { display: flex; gap: 6px; align-items: center; margin: 4px 0; pointer-events: auto; }
.zs-quote-box { min-width: 58px; height: 32px; border: 1px solid; border-radius: 4px; display: grid; place-items: center; font-size: 12px; line-height: 1.05; padding: 1px 6px; background: var(--zs-bg); }
.zs-quote-box.bid { border-color: var(--zs-bear); color: var(--zs-bear); }
.zs-quote-box.ask { border-color: var(--zs-link); color: var(--zs-link); }
.zs-quote-box small { font-size: 10px; }
.zs-quote-spread { font-size: 11px; color: var(--zs-text-2); }
/* always visible (never hover-only); touch devices use the name / manage chip instead (see "panel control") */
.zs-legend-mini { display: inline-flex; gap: 2px; opacity: 0.55; transition: opacity 0.1s; }
.zs-legend-line:hover .zs-legend-mini, .zs-legend-line:focus-within .zs-legend-mini { opacity: 1; }
.zs-mini { width: 22px; height: 22px; border: 0; background: var(--zs-bg); border-radius: 3px; display: grid; place-items: center; cursor: pointer; color: var(--zs-text-2); }
.zs-mini:hover { background: var(--zs-hover); color: var(--zs-text); }
.zs-collapse { width: 22px; height: 18px; border: 1px solid var(--zs-border); background: var(--zs-bg); border-radius: 3px; display: grid; place-items: center; cursor: pointer; pointer-events: auto; margin-top: 4px; }
.zs-pane-legend { position: absolute; left: 8px; z-index: 5; direction: ltr; font-size: 12px; pointer-events: none; }
.zs-pane-legend .zs-legend-line { height: 20px; }

/* ---------- floating drawing toolbar ---------- */
.zs-float {
  position: absolute; z-index: 20; display: flex; align-items: center; gap: 1px; height: 36px; padding: 0 4px; background: var(--zs-surface);
  border: 1px solid var(--zs-border); border-radius: 6px; box-shadow: var(--zs-shadow-sm);
}
.zs-float .zs-btn { height: 30px; min-width: 30px; padding: 0 5px; font-size: 13px; }
.zs-float-drag { width: 14px; height: 30px; display: grid; place-items: center; color: var(--zs-faint); cursor: grab; }
.zs-swatch-line { display: grid; justify-items: center; gap: 2px; }
.zs-swatch-line i { display: block; width: 18px; height: 3px; border-radius: 1px; }
.zs-palette { display: grid; grid-template-columns: repeat(10, 22px); gap: 4px; padding: 10px; }
.zs-palette button { width: 22px; height: 22px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.08); cursor: pointer; }
.zs-palette button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--zs-bg), 0 0 0 3px var(--zs-text); }
.zs-opacity { display: flex; align-items: center; gap: 8px; padding: 4px 12px 10px; font-size: 12px; color: var(--zs-muted); }
.zs-opacity input { flex: 1; accent-color: var(--zs-text); }

/* text editor overlay */
.zs-text-editor { position: absolute; z-index: 25; min-width: 180px; background: var(--zs-surface); border: 1px solid var(--zs-link); border-radius: 4px; box-shadow: var(--zs-shadow-sm); padding: 4px; }
.zs-text-editor textarea { display: block; width: 240px; min-height: 60px; border: 0; outline: 0; resize: both; font: inherit; font-size: 14px; color: var(--zs-text); background: transparent; }
.zs-text-editor .actions { display: flex; justify-content: flex-end; gap: 4px; }

/* ---------- bottom bar ---------- */
.zs-bottom { display: flex; align-items: center; gap: 2px; padding: 0 8px; border-top: 1px solid var(--zs-border); background: var(--zs-bg); min-width: 0; overflow: hidden; }
.zs-bottom .zs-btn { height: 28px; font-size: 13px; padding: 0 7px; font-weight: 500; }
.zs-clock { font-size: 13px; color: var(--zs-text); direction: ltr; }
.zs-feed { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--zs-muted); padding: 0 6px; white-space: nowrap; }

/* realtime button */
.zs-realtime {
  position: absolute; z-index: 6; width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--zs-border); background: var(--zs-bg); display: grid; place-items: center;
  cursor: pointer; box-shadow: var(--zs-shadow-sm); color: var(--zs-text);
}
.zs-realtime:hover { background: var(--zs-hover); }

/* state banners (loading, stale...) */
.zs-banner {
  position: absolute; z-index: 7; top: 8px; right: 70px; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 13px;
  background: var(--zs-bg); border: 1px solid var(--zs-border); font-size: 12px; color: var(--zs-text-2); box-shadow: var(--zs-shadow-sm);
}
.zs-banner.warn { border-color: #f5c16c; }
.zs-banner.err { border-color: var(--zs-bear); color: var(--zs-bear); }
.zs-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--zs-border); border-top-color: var(--zs-text); animation: zs-spin 0.7s linear infinite; }
@keyframes zs-spin { to { transform: rotate(360deg); } }
.zs-test-badge { position: absolute; z-index: 7; bottom: 36px; left: 8px; font-size: 11px; color: var(--zs-muted); background: var(--zs-hover); padding: 3px 8px; border-radius: 10px; pointer-events: none; }

/* ZeroSpread chart signature - lower-left plot, non-interactive */
.zs-brand-mark {
  position: absolute;
  left: 22px;
  z-index: 4;
  pointer-events: none;
  line-height: 0;
  opacity: 0.88;
  transform: translateY(-8px);
}
.zs-brand-mark__img {
  display: block;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.zs-brand-mark__img--desktop {
  width: 29px;
  height: 16px;
}
.zs-brand-mark__img--tablet {
  display: none;
  width: 25px;
  height: 14px;
}
@media (max-width: 1024px) and (min-width: 761px) {
  .zs-brand-mark { left: 20px; opacity: 0.86; }
  .zs-brand-mark__img--desktop { display: none; }
  .zs-brand-mark__img--tablet { display: block; }
}
@media (max-width: 760px) {
  .zs-brand-mark { left: 18px; opacity: 0.86; }
  .zs-brand-mark__img--desktop {
    display: block;
    width: 22px;
    height: 12px;
  }
  .zs-brand-mark__img--tablet { display: none; }
}

/*
 * Dark theme logo: /brand/zerospread-logo-clean.png (1024×682) has its mark at x 270–790, y 163–540
 * (521×378). The box takes that aspect at the light mark's height; the image is scaled and shifted so
 * exactly the mark fills it. Both logos stay in the DOM (the dark one is fetched up front), and the
 * workspace theme shows one: the theme button swaps them in the same frame.
 */
.zs-logo-dark {
  display: none;
  position: relative;
  overflow: hidden;
  aspect-ratio: 521 / 378;
  flex: none;
  line-height: 0;
  pointer-events: none;
}
.zs-logo-dark > img {
  position: absolute;
  max-width: none;
  width: 196.545%; /* 1024 / 521 */
  height: auto;
  left: -51.823%; /* 270 / 521 */
  top: -43.122%; /* 163 / 378 */
  user-select: none;
  -webkit-user-drag: none;
}
.zs-ws[data-theme='dark'] .zs-logo-dark { display: block; }
.zs-ws[data-theme='dark'] .zs-logo-light { display: none !important; }
/* same height as the light chart mark at each width */
.zs-brand-mark__dark { height: 16px; }
@media (max-width: 1024px) and (min-width: 761px) { .zs-brand-mark__dark { height: 14px; } }
@media (max-width: 760px) { .zs-brand-mark__dark { height: 12px; } }

/* ---------- right rail + side panel ---------- */
.zs-right { display: flex; min-height: 0; width: var(--zs-rail-w); flex: none; direction: rtl; }
.zs-rail {
  width: var(--zs-rail-w);
  background: var(--zs-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 4px;
  border-radius: 4px 0 0 4px;
}
.zs-rail .zs-tool { width: 34px; height: 34px; }
/* Side panel — an overlay here; premium.css docks it beside the plot from 901 px (the plot narrows once on open / close) */
.zs-side {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: var(--zs-rail-w);
  width: min(300px, 42vw);
  z-index: 40;
  background: var(--zs-bg);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--zs-shadow);
  border: 1px solid var(--zs-border);
  pointer-events: auto;
}
.zs-side-head { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--zs-border); font-weight: 700; font-size: 14px; }
.zs-side-body { overflow-y: auto; flex: 1; min-height: 0; }
.zs-obj-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; font-size: 13px; cursor: pointer; }
.zs-obj-row:hover { background: var(--zs-hover); }
.zs-obj-row.is-selected { background: var(--zs-hover); box-shadow: inset 3px 0 0 var(--zs-link); }
.zs-obj-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-obj-group { padding: 10px 12px 4px; font-size: 11px; font-weight: 500; color: var(--zs-muted); }
.zs-intel-block { padding: 12px; border-bottom: 1px solid var(--zs-border); }
.zs-intel-block h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.zs-intel-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.zs-intel-kv span:first-child { color: var(--zs-muted); }
.zs-intel-off { font-size: 12px; color: var(--zs-muted); display: flex; align-items: center; gap: 6px; }
.zs-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 3px; background: var(--zs-hover); font-size: 11px; color: var(--zs-text-2); }

/* signal summary strip inside chart */
.zs-signal-strip { position: absolute; z-index: 5; top: 8px; right: 70px; display: flex; gap: 10px; font-size: 12px; color: var(--zs-text-2); background: color-mix(in srgb, var(--zs-bg) 86%, transparent); padding: 3px 8px; border-radius: 4px; }

/* replay bar */
/* replay: the panel places the slot just above its time axis (ChartPanel); the bar is centred in it,
   as wide as its content, never wider than the panel, and its clock never wraps */
.zs-replay-slot { position: absolute; z-index: 8; inset-inline: 0; display: flex; justify-content: center; pointer-events: none; container-type: inline-size; }
.zs-replay { pointer-events: auto; box-sizing: border-box; display: flex; align-items: center; gap: 2px; height: 40px; max-width: calc(100% - 16px); min-width: 0; padding: 0 6px; background: var(--zs-surface); border: 1px solid var(--zs-border); border-radius: 6px; box-shadow: var(--zs-shadow); direction: rtl; }
.zs-replay > * { flex: none; }
.zs-replay .label { font-size: 12px; color: var(--zs-muted); padding: 0 8px; white-space: nowrap; }
/* only the exit text gives way on a very narrow panel (the clock and the icons never do): below
   384 px the exit button is its stop icon (it keeps its aria-label); the ellipsis is a last resort */
.zs-replay > .zs-replay-exit { flex: 0 1 auto; min-width: 0; }
.zs-replay-exit > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 383px) { .zs-replay-exit > span { display: none; } }
.zs-replay[data-compact] .label { padding: 0 4px; }
.zs-replay-hint { position: absolute; z-index: 8; top: 12px; left: 50%; transform: translateX(-50%); background: var(--zs-invert-bg); color: var(--zs-invert-text); font-size: 13px; padding: 6px 12px; border-radius: 4px; }

/* form controls */
.zs-field { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px; padding: 8px 20px; font-size: 14px; }
.zs-input { height: 34px; border: 1px solid var(--zs-border-strong); border-radius: 4px; padding: 0 8px; font: inherit; font-size: 14px; background: var(--zs-bg); color: var(--zs-text); width: 100%; direction: ltr; font-variant-numeric: tabular-nums; }
.zs-input:focus { outline: 0; border-color: var(--zs-text); }
.zs-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--zs-border); }
.zs-btn.solid { background: var(--zs-invert-bg); color: var(--zs-invert-text); padding: 0 16px; height: 34px; }
.zs-btn.ghost { border: 1px solid var(--zs-border-strong); padding: 0 16px; height: 34px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .zs-hide-md { display: none !important; }
  .zs-ws { --zs-rail-w: 40px; }
  /* tablets and phones: only the middle of the toolbar scrolls sideways. The host controls (home logo, Dark/Light) stay
     fixed at the start and the alert at the end: they are separate boxes beside the scroller, not sticky items inside
     it, so nothing that scrolls can pass over them or push them past the screen edge. */
  .zs-top { overflow: hidden; }
  .zs-top-scroll {
    display: flex; align-items: center; gap: inherit; flex: 1 1 auto; min-width: 0; align-self: stretch;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .zs-top-scroll::-webkit-scrollbar { display: none; }
  .zs-top-scroll > .zs-top-spacer, .zs-top-scroll > .zs-top-end { order: 0; }
  /* nothing in the strip shrinks into its neighbour: the strip scrolls instead */
  .zs-top > *, .zs-top-scroll > *, .zs-top-group > *, .zs-top .zs-btn { flex-shrink: 0; }
  .zs-top > .zs-top-scroll { flex-shrink: 1; }
  .zs-top-host, .zs-top-alert { position: relative; z-index: 2; flex: none; background: var(--zs-bg); }
  .zs-top-alert { order: 0; }
}
@media (max-width: 900px) {
  .zs-ws { --zs-top-h: 42px; --zs-bottom-h: 40px; }
  .zs-iv { min-width: 28px; padding: 0 4px; font-size: 13px; }
}
@media (max-width: 760px) {
  .zs-ws { --zs-left-w: 0px; --zs-gap: 0px; --zs-bottom-h: 48px; --zs-top-h: 48px; --zs-touch: 44px; }
  .zs-body { grid-template-columns: minmax(0, 1fr) auto; position: relative; }
  /* the rail is hidden on phones: its column must not keep an empty strip beside the chart */
  .zs-right { width: 0; overflow: visible; }
  .zs-left { display: none; }
  .zs-left.is-open {
    display: flex; position: absolute; z-index: 40; left: 0; top: 0; bottom: 0;
    width: 52px; box-shadow: var(--zs-shadow); padding: 8px 0; gap: 4px;
  }
  .zs-left.is-open .zs-tool { width: var(--zs-touch); height: var(--zs-touch); min-width: var(--zs-touch); }
  .zs-hide-sm { display: none !important; }
  .zs-save-state { display: none; }
  .zs-top-scroll { touch-action: pan-x; }
  .zs-bottom { overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
  .zs-bottom::-webkit-scrollbar { display: none; }
  .zs-top .zs-btn { height: var(--zs-touch); min-width: var(--zs-touch); }
  /* never squeeze toolbar items into each other: the bar scrolls sideways instead */
  .zs-top > *, .zs-top-scroll > *, .zs-top-group > *, .zs-top .zs-btn { flex-shrink: 0; }
  .zs-bottom .zs-btn { height: var(--zs-touch); min-width: var(--zs-touch); padding: 0 10px; }
  .zs-bottom-pin { position: sticky; inset-inline-end: 0; z-index: 2; background: var(--zs-bg); }
  /* cover the bar's end padding too, so nothing scrolled underneath peeks out or takes a tap */
  .zs-bottom-pin::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 100%; width: 8px; background: var(--zs-bg); }
  .zs-side { position: absolute; z-index: 45; inset: auto 0 0 0; width: auto; height: 55%; border-radius: 12px 12px 0 0; box-shadow: var(--zs-shadow); }
  .zs-rail { display: none; }
  .zs-pop.zs-sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; border-radius: 12px 12px 0 0; max-height: 70vh; }
  .zs-pop.zs-sheet .zs-row { min-height: 44px; }
  .zs-backdrop { padding: 0; align-items: end; }
  .zs-modal { border-radius: 12px 12px 0 0; max-height: 92vh; width: 100%; max-width: none; }
  .zs-sym-row { grid-template-columns: 28px 100px 1fr; min-height: 48px; padding: 0 16px; gap: 10px; }
  .zs-sym-tk { font-size: 13px; }
  .zs-etf-note { display: none; }
  .zs-sym-row .zs-sym-meta { display: none; }
  .zs-legend .ohlc { display: none; }
  .zs-legend .ohlc.show-sm { display: inline-flex; }
  .zs-float { height: 48px; max-width: calc(100vw - 16px); overflow-x: auto; }
  .zs-float .zs-btn { min-width: 40px; height: 40px; }
  .zs-banner, .zs-signal-strip { right: 12px; left: 12px; max-width: none; }
  .zs-canvas-host { touch-action: none; }
  .zs-tool-toggle-mobile {
    display: grid; place-items: center; position: absolute; z-index: 35; left: 8px; bottom: 56px;
    width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--zs-border);
    background: var(--zs-surface); box-shadow: var(--zs-shadow-sm);
  }
}
@media (min-width: 761px) {
  .zs-tool-toggle-mobile { display: none !important; }
}

.zs-check { width: 16px; display: grid; place-items: center; flex: none; }
.zs-ws[dir='rtl'] .zs-sym-tk, .zs-ws[dir='rtl'] .zs-cmp-row .t { text-align: right; }
.zs-ws[dir='rtl'] .zs-cmp-row > span:last-child > span[style] { text-align: left; }

/* ---------- panel control: every panel closes, nothing scrolls the chart, phones get sheets ---------- */
/* the chart owns every gesture on its canvas (no page pinch-zoom / pan / pull-to-refresh through it) */
.zs-canvas-host { touch-action: none; }
/* scrolling a panel never chains to the page or the chart behind it */
.zs-side-body, .zs-list, .zs-pop, .zs-modal-body, .zsi-inspector-b, .zs-left.is-open { overscroll-behavior: contain; }
.zs-modal-head, .zs-modal-foot, .zs-side-head { flex: none; }
.zs-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* dialogs and sheets stay inside the visible area (soft keyboard, browser bars) */
.zs-backdrop { top: var(--zs-vv-top, 0px); bottom: var(--zs-vv-bottom, 0px); }
.zs-modal { max-height: min(700px, calc(100vh - 32px)); max-height: min(700px, calc(var(--zs-vvh, 100vh) - 32px)); }
.zs-pop { max-height: calc(100vh - 16px); max-height: calc(var(--zs-vvh, 100vh) - 16px); }
.zs-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(19, 23, 34, 0.28); touch-action: none; }
.zs-sheet-handle { display: flex; align-items: center; justify-content: center; height: 22px; flex: none; touch-action: none; cursor: grab; }
.zs-sheet-handle i { width: 40px; height: 5px; border-radius: 3px; background: var(--zs-border-strong); }
.zs-sheet-handle { position: relative; }
.zs-sheet-handle.has-x { height: 46px; }
.zs-sheet-x { position: absolute; top: 1px; inset-inline-end: 6px; }
.zs-panel-error { display: grid; gap: 10px; justify-items: start; padding: 16px; font-size: 13px; line-height: 1.6; color: var(--zs-text-2); }
.zs-panel > .zs-panel-error {
  position: absolute; z-index: 29; inset-inline-start: 8px; bottom: 48px; max-width: 320px;
  background: var(--zs-surface); border: 1px solid var(--zs-border); border-radius: 8px; box-shadow: var(--zs-shadow-sm);
}

/* legend: indicator names open the manager; the manage chip is the touch entry point */
.zs-legend-ind {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 4px; margin-inline-start: -4px; border: 0; border-radius: 4px;
  background: transparent; color: var(--zs-text); font: inherit; white-space: nowrap; cursor: pointer;
}
.zs-legend-ind:hover { background: var(--zs-hover); }
.zs-legend-ind:focus-visible, .zs-legend-manage:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: 1px; }
.zs-legend-ind-line { height: 20px; font-size: 13px; }
.zs-legend-ind-line.is-hidden > .zs-legend-ind, .zs-legend-ind-line.is-hidden > .zs-num { opacity: 0.5; }
.zs-legend-manage-line { height: auto; }
.zs-legend-manage {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-top: 4px; padding: 0 10px; border-radius: 13px;
  border: 1px solid var(--zs-border); background: color-mix(in srgb, var(--zs-bg) 92%, transparent); color: var(--zs-text-2);
  font: 500 12px/1 var(--zs-font-institutional); cursor: pointer; white-space: nowrap;
}
.zs-legend-manage:hover { background: var(--zs-hover); color: var(--zs-text); border-color: var(--zs-border-strong); }
.zs-count-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--zs-invert-bg); color: var(--zs-invert-text); font-size: 11px; font-weight: 700; line-height: 1;
}

/* indicator manager */
.zs-im-shortcut {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 40px); min-height: 44px; margin: 0 20px 10px; padding: 0 12px;
  border: 1px solid var(--zs-border); border-radius: 8px; background: var(--zs-hover); color: var(--zs-text); font: inherit; font-size: 14px; text-align: start; cursor: pointer;
}
.zs-im-shortcut:hover { border-color: var(--zs-border-strong); }
.zs-im-shortcut-go { margin-inline-start: auto; color: var(--zs-link); font-weight: 500; }
.zs-im-list { padding-bottom: 8px; }
.zs-im-row { display: flex; align-items: center; gap: 4px; min-height: 56px; padding-block: 6px; padding-inline: 20px 10px; border-bottom: 1px solid var(--zs-border); }
.zs-im-row.is-hidden .zs-im-name, .zs-im-row.is-hidden .zs-im-swatch { opacity: 0.5; }
.zs-im-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; margin-inline-end: 6px; }
.zs-im-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zs-im-name .n { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-im-name .m { font-size: 12px; color: var(--zs-muted); }
.zs-im-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--zs-text-2); cursor: pointer; }
.zs-im-btn:hover { background: var(--zs-hover); color: var(--zs-text); }
.zs-im-btn[aria-pressed='true'] { color: var(--zs-muted); }
.zs-im-btn[disabled] { opacity: 0.35; cursor: default; background: transparent; }
.zs-im-btn:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
.zs-im-foot { align-items: center; flex-wrap: wrap; }
.zs-btn.danger { background: var(--zs-bear); color: #fff; padding: 0 16px; height: 34px; }
.zs-btn.danger:hover { opacity: 0.9; background: var(--zs-bear); }
.zs-btn.ghost.zs-danger:hover { background: color-mix(in srgb, var(--zs-bear) 8%, transparent); }
.zs-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; }
.zs-confirm-text { flex: 1 1 200px; display: grid; gap: 2px; font-size: 14px; }
.zs-confirm-text span { font-size: 12px; color: var(--zs-muted); }
.zs-confirm-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.zs-confirm-note { padding: 4px 20px 12px; font-size: 14px; line-height: 1.6; color: var(--zs-text-2); }

/* phones: the tools drawer closes by its X, by tapping beside it, by Escape or by back */
.zs-tools-scrim { display: none; }

/* touch: every close / panel control is at least 44 × 44 CSS px */
@media (pointer: coarse) {
  .zs-x { width: 44px; height: 44px; }
  .zsi-icon { width: 44px; height: 44px; }
  .zs-obj-row { min-height: 44px; }
  .zs-obj-row .zs-mini { width: 44px; height: 44px; }
  .zs-legend-mini { display: none; }
  .zs-legend-ind-line, .zs-pane-legend .zs-legend-ind-line { height: 34px; }
  .zs-legend-ind { height: 34px; padding: 0 8px; }
  .zs-legend-manage { height: 44px; padding: 0 14px; border-radius: 22px; font-size: 13px; }
  .zs-modal-foot .zs-btn, .zs-im-foot .zs-btn { min-height: 44px; }
  .zs-tool-caret { opacity: 0.6; }
}
@media (max-width: 760px) {
  .zs-x { width: 44px; height: 44px; }
  .zs-side { height: min(58%, calc(var(--zs-vvh, 100vh) * 0.58)); max-height: calc(100% - 8px); padding-bottom: env(safe-area-inset-bottom); }
  .zs-side-head { height: 48px; padding-inline: 14px 4px; touch-action: none; }
  .zs-side .zs-sheet-handle { height: 18px; }
  .zs-modal { max-height: calc(var(--zs-vvh, 92vh) - 12px); padding-bottom: env(safe-area-inset-bottom); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .zs-modal-head { padding: 6px 12px 10px 20px; touch-action: none; }
  .zs-backdrop--fullscreen { height: var(--zs-vvh, 100dvh); bottom: auto; }
  .zs-backdrop--fullscreen .zs-modal {
    height: 100%; max-height: 100%; min-height: 0; min-width: 0; border-radius: 0;
    padding-top: env(safe-area-inset-top); container: zs-asset-search / size;
  }
  .zs-backdrop--fullscreen .zs-modal-head { padding: 0 12px; touch-action: auto; }
  .zs-backdrop--fullscreen .zs-modal-title { font-size: 17px; }
  .zs-backdrop--fullscreen .zs-search { height: 44px; flex: none; margin-inline: 12px; }
  .zs-backdrop--fullscreen .zs-search .zs-x { flex: none; }
  .zs-backdrop--fullscreen .zs-chips {
    flex: none; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 4px 12px; border-bottom: 1px solid var(--zs-border);
  }
  .zs-backdrop--fullscreen .zs-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 44px; white-space: nowrap; }
  .zs-backdrop--fullscreen .zs-chip-n { margin-inline-start: 0; }
  .zs-backdrop--fullscreen .zs-list-head { display: none; }
  .zs-backdrop--fullscreen .zs-list { touch-action: pan-y; }
  .zs-backdrop--fullscreen .zs-sym-row { grid-template-columns: 28px minmax(0, 1fr); }
  .zs-backdrop--fullscreen .zs-sym-row.is-kb { box-shadow: inset 0 0 0 1px var(--zs-border-strong); }
  .zs-backdrop--fullscreen .zs-sym-label { display: grid; gap: 2px; min-width: 0; }
  .zs-backdrop--fullscreen .zs-sym-name { color: var(--zs-muted); font-size: 12px; }
  .zs-backdrop--fullscreen .zs-footer-hint { padding: 8px; }
  .zs-pop.zs-sheet {
    bottom: var(--zs-vv-bottom, 0px) !important; max-height: min(70vh, calc(var(--zs-vvh, 100vh) - 24px));
    padding-bottom: calc(6px + env(safe-area-inset-bottom)); padding-top: 0;
  }
  .zs-tools-scrim { display: block; position: absolute; inset: 0; z-index: 39; background: rgba(19, 23, 34, 0.18); touch-action: none; }
  .zs-left.is-open > * { flex-shrink: 0; }
  .zs-left.is-open { width: 64px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .zs-left-close { color: var(--zs-text); }
  .zs-legend-manage-l { display: none; }
  .zsi-inspector { padding-bottom: env(safe-area-inset-bottom); }
}
@container zs-asset-search (max-height: 360px) {
  .zs-ws .zs-backdrop--fullscreen .zs-sym-current,
  .zs-backdrop--fullscreen .zs-footer-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-pop { animation: none; }
}

/* smallest phones (≤360px): the instrument controls and the pinned alert must all fit without one covering another */
@media (max-width: 360px) {
  .zs-top { padding: 0 4px; gap: 0; }
  .zs-top-group { gap: 0; }
  .zs-top .zs-sep { margin: 0 2px; }
  .zs-top .zs-symbol-btn { padding: 0 6px; }
  .zs-top .zs-symbol-btn .zs-logo { display: none; }
}

/* ZS Chart — intelligence UI (rail items, context chips, anchored inspector, drawers).
   Light, restrained, Tajawal 400/500/700, tabular Latin digits. Brand lime only as the active-rail tick. */

.zs-ws {
  --zsi-radar: #6d4aff;
  --zsi-inews: #b45309;
  --zsi-shock: #d93d42;
  --zsi-entry: #2962ff;
  --zsi-card-r: 8px;
}

/* ---------- rail ---------- */
.zsi-rail-sep { width: 26px; height: 1px; background: var(--zs-border); margin: 4px 0; flex: none; }
/* nothing above it (a host without the object tree): no divider at the top of the rail */
.zs-rail > .zsi-rail-sep:first-child { display: none; }
.zsi-railbtn { position: relative; }
.zsi-railbtn.is-active::after {
  content: ''; position: absolute; inset-inline-end: -6px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--zs-brand);
}
.zsi-rail-dot { position: absolute; top: 5px; inset-inline-start: 5px; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--zs-bg); pointer-events: none; }
.zsi-railbtn-ic { position: relative; display: inline-flex; }
/* not in the user's plan: a small lock inside the button's top corner (the icon stays whole); a press opens the
   host's subscription offer when there is one, nothing otherwise */
.zsi-railbtn-lock {
  position: absolute; top: 3px; inset-inline-end: 3px; width: 15px; height: 15px; border-radius: 50%; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center; background: var(--zs-bg); color: var(--zs-text-2);
  box-shadow: 0 0 0 1px var(--zs-border-strong);
}
.zsi-railbtn.is-locked, .zsi-barbtn.is-locked { cursor: not-allowed; }
.zsi-railbtn.is-locked[aria-haspopup], .zsi-barbtn.is-locked[aria-haspopup] { cursor: pointer; }
/* the named pair (news + recommendations): one size, one weight, one active state, a clear gap between them */
/* the pair spans the rail (46 px): «التوصيات» needs ~44 px at 10.5 px and was cut at 44 px / 11 px (measured 2026-11-09) */
.zs-rail .zsi-railbtn.has-text { width: 100%; height: auto; min-height: 58px; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 0 6px;
  border-radius: 8px; color: var(--zs-text); background: transparent; }
.zs-rail .zsi-railbtn.has-text + .zsi-railbtn.has-text { margin-top: 8px; }
.zs-rail .zsi-railbtn.has-text:hover { background: var(--zs-hover); }
.zs-rail .zsi-railbtn.has-text.is-active { background: var(--zs-pressed); }
.zsi-railbtn-t { font-size: 10.5px; line-height: 1.15; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* in the rail the lock sits in the button's corner, clear of the icon (it covered ~100 px² of it at 3 px in) */
.zs-rail .zsi-railbtn.has-text .zsi-railbtn-lock { top: -2px; inset-inline-end: 0; width: 14px; height: 14px; }
.zs-rail .zsi-railbtn.has-text .zsi-railbtn-lock svg { width: 10px; height: 10px; }
/* phones: the same pair in the bottom bar, each with its name */
.zsi-barbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; white-space: nowrap;
  min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; color: var(--zs-text); background: transparent; }
.zsi-barbtn + .zsi-barbtn { margin-inline-start: 8px; }
.zsi-barbtn:hover { background: var(--zs-hover); }
.zsi-barbtn.is-active { background: var(--zs-pressed); }
.zsi-barbtn.is-locked { padding-inline-end: 19px; }
.zsi-barbtn .zsi-railbtn-lock { top: 2px; inset-inline-end: 2px; }
/* the bar button grows with its name (the rail's 46 px cap cut «التوصيات» here too) */
.zsi-barbtn .zsi-railbtn-t { font-size: 11px; max-width: none; overflow: visible; }
/* the narrowest phones: the news keeps its name, the recommendations entry is its icon (and lock) alone */
@media (max-width: 360px) {
  .zsi-barbtn[data-rail='setups'] .zsi-railbtn-t { display: none; }
  .zsi-barbtn[data-rail='setups'] { min-width: 44px; justify-content: center; padding: 0 8px; }
  .zsi-barbtn[data-rail='setups'].is-locked { padding-inline-end: 14px; }
}

/* ---------- context chips (top of plot, beside the price axis) ---------- */
.zsi-chips {
  position: absolute; z-index: 6; top: 8px; display: flex; gap: 6px; direction: rtl; max-width: 60%; flex-wrap: wrap; justify-content: flex-start;
  pointer-events: none;
}
.zsi-cchip {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--zs-border); background: color-mix(in srgb, var(--zs-bg) 92%, transparent); color: var(--zs-text-2);
  font: 500 12px/1 var(--zs-font-institutional); cursor: pointer; white-space: nowrap; transition: background-color 120ms ease, border-color 120ms ease;
}
.zsi-cchip:hover { background: var(--zs-hover); border-color: var(--zs-border-strong); color: var(--zs-text); }
.zsi-cchip:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: 1px; }
.zsi-cchip.is-shock { border-color: color-mix(in srgb, var(--zsi-shock) 40%, var(--zs-border)); color: var(--zsi-shock); }
.zsi-cchip .zs-num { color: var(--zs-muted); }

/* ---------- inspector (anchored card) ---------- */
.zsi-inspector {
  position: absolute; z-index: 28; left: 0; top: 0; width: 300px; max-height: calc(100% - 64px); display: flex; flex-direction: column;
  background: var(--zs-surface); border: 1px solid var(--zs-border); border-radius: var(--zsi-card-r); box-shadow: var(--zs-shadow);
  direction: rtl; font-size: 13px; color: var(--zs-text); animation: zsi-in 120ms ease-out;
  will-change: transform;
}
@keyframes zsi-in { from { opacity: 0; } to { opacity: 1; } }
.zsi-inspector-h { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 12px 0 4px; border-bottom: 1px solid var(--zs-border); font-weight: 700; font-size: 13px; flex: none; }
.zsi-inspector-b { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.zsi-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 4px; cursor: pointer; color: var(--zs-muted); padding: 0; }
.zsi-icon:hover { background: var(--zs-hover); color: var(--zs-text); }
.zsi-icon svg { width: 20px; height: 20px; }

/* ---------- cards ---------- */
.zsi-icard { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--zs-border); }
.zsi-icard:last-child { border-bottom: 0; }
.zsi-icard.is-done { opacity: 0.8; }
.zsi-ihead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.zsi-ihead .sym { font-weight: 700; font-size: 14px; }
.zsi-grow { flex: 1; }
.zsi-muted { color: var(--zs-muted); font-size: 12px; }
.zsi-ititle { font-weight: 500; font-size: 13px; line-height: 1.55; color: var(--zs-text); }
.zsi-text { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--zs-text-2); }
.zsi-text.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.zsi-note { font-size: 12px; line-height: 1.6; color: var(--zs-muted); }
.zsi-note.pad { padding: 0 12px 12px; }
.zsi-levels { display: grid; gap: 2px; padding: 6px 8px; border-radius: 6px; background: var(--zs-hover); }
.zsi-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zsi-ikv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; font-size: 12.5px; }
.zsi-ikv .k { display: inline-flex; align-items: center; gap: 6px; color: var(--zs-muted); }
.zsi-ikv .v { color: var(--zs-text); font-weight: 500; text-align: left; }
.zsi-ikv.col { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; }
.zsi-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.zsi-hit { display: inline-flex; color: var(--zs-bull); margin-inline-start: 2px; }
.zsi-hit svg { width: 14px; height: 14px; }
.zsi-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--zs-hover); color: var(--zs-text-2); }
.zsi-chip.t-bull { background: rgba(8, 153, 129, 0.1); color: #067a67; }
.zsi-chip.t-bear { background: rgba(242, 54, 69, 0.1); color: #c42330; }
.zsi-chip.t-entry { background: rgba(41, 98, 255, 0.1); color: #1e4fd8; }
.zsi-chip.t-radar { background: rgba(109, 74, 255, 0.1); color: #5436d6; }
.zsi-chip.t-news { background: rgba(217, 119, 6, 0.12); color: var(--zsi-inews); }
.zsi-chip.t-calendar { background: rgba(14, 116, 144, 0.12); color: #0e7490; }
.zs-ws[data-theme='dark'] .zsi-chip.t-calendar { color: #5cc4dc; }
.zsi-chip.t-shock { background: rgba(229, 72, 77, 0.1); color: var(--zsi-shock); }
.zsi-chip.t-muted { background: var(--zs-hover); color: var(--zs-muted); }
.zsi-meter { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; min-height: 20px; }
.zsi-meter .k { color: var(--zs-muted); }
.zsi-meter .bar { height: 4px; border-radius: 2px; background: var(--zs-hover); overflow: hidden; direction: ltr; }
.zsi-meter .bar i { display: block; height: 100%; border-radius: 2px; }
.zsi-meter .v { text-align: left; color: var(--zs-text); font-weight: 500; }
.zsi-sec { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--zs-border); }
.zsi-idrawer > .zsi-sec { padding: 12px; border-top: 0; border-bottom: 1px solid var(--zs-border); gap: 6px; }
.zsi-sec-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--zs-muted); letter-spacing: 0; }
.zsi-src { font-size: 11px; color: var(--zs-faint); }
.zsi-ifoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zsi-link { border: 0; background: transparent; color: var(--zs-link); font: 500 12px var(--zs-font-institutional); cursor: pointer; padding: 2px 0; }
.zsi-link:hover { text-decoration: underline; }
.zsi-timeline { list-style: none; margin: 0; padding: 0 12px 0 0; display: grid; gap: 4px; border-inline-start: 1px solid var(--zs-border); }
.zsi-timeline li { position: relative; display: flex; justify-content: space-between; font-size: 12px; color: var(--zs-text-2); }
.zsi-timeline li::before { content: ''; position: absolute; inset-inline-start: -16px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--zs-surface); border: 1.5px solid var(--zsi-entry); }
.zsi-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.zsi-checks li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--zs-muted); }
.zsi-checks li.met { color: var(--zs-text-2); }
.zsi-checks .box { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--zs-border-strong); display: grid; place-items: center; flex: none; }
.zsi-checks li.met .box { background: var(--zsi-radar); border-color: var(--zsi-radar); color: #fff; }
.zsi-checks .box svg { width: 12px; height: 12px; }
.zsi-evt { display: grid; gap: 4px; padding: 6px 0; border-top: 1px dashed var(--zs-border); }
.zsi-evt:first-of-type { border-top: 0; }
.zsi-bars { display: grid; gap: 4px; }
.zsi-barrow { display: grid; grid-template-columns: 1fr 90px 30px; align-items: center; gap: 8px; font-size: 12px; color: var(--zs-text-2); }
.zsi-barrow.is-mine { font-weight: 700; color: var(--zs-text); }
.zsi-barrow .bar { height: 4px; border-radius: 2px; background: var(--zs-hover); overflow: hidden; direction: ltr; }
.zsi-barrow .bar i { display: block; height: 100%; }
.zsi-barrow .v { text-align: left; }
.zsi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zsi-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--zs-text-2); }
.zsi-state { display: flex; align-items: center; gap: 8px; padding: 14px 12px; font-size: 12.5px; color: var(--zs-muted); }
.zsi-clickable { cursor: pointer; }
.zsi-clickable:hover { background: color-mix(in srgb, var(--zs-hover) 60%, transparent); }
.zsi-clickable:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }

/* ---------- drawers (reuse .zs-side: docked beside the plot from 901 px, overlay / sheet below) ---------- */
.zs-side.zsi-side { width: min(340px, 44vw); }
.zsi-idrawer { direction: rtl; }
/* an English reader gets the cards left-to-right (the RTL defaults above are for Arabic and Hebrew) */
.zs-ws[dir='ltr'] .zsi-inspector, .zs-ws[dir='ltr'] .zsi-idrawer, .zs-ws[dir='ltr'] .zsi-chips { direction: ltr; }
.zsi-toggle { position: relative; display: grid; grid-template-columns: auto 1fr auto 34px; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; cursor: pointer; }
.zsi-toggle .name { color: var(--zs-text); font-weight: 500; }
.zsi-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zsi-switch { width: 30px; height: 18px; border-radius: 9px; background: var(--zs-border-strong); position: relative; transition: background-color 120ms ease; justify-self: end; }
.zsi-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--zs-shadow-sm); transition: transform 120ms ease; }
.zsi-toggle input:checked + .zsi-switch { background: var(--zs-invert-bg); }
.zsi-toggle input:checked + .zsi-switch::after { transform: translateX(-12px); }
.zsi-toggle input:focus-visible + .zsi-switch { outline: 2px solid var(--zs-focus); outline-offset: 2px; }

.zsi-mobile-btn { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zsi-inspector { animation: none; }
  .zsi-cchip, .zsi-switch, .zsi-switch::after { transition: none; }
}

@media (max-width: 1240px) {
  .zsi-cchip .lbl { display: none; }
  .zsi-chips { max-width: 42%; }
}
@media (max-width: 760px) {
  .zsi-chips { display: none; }
  .zsi-inspector { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 55%; transform: none !important; border-radius: 12px; z-index: 36; }
  .zs-side.zsi-side { width: auto; }
  /* phones: the vision entry lives in the bottom bar (pinned), never floating over the price or time axis */
  .zsi-mobile-btn { display: inline-flex; }
}

/* ---- Explain this chart (grounded local reading) ---- */
.zsi-explain-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--zs-border); }
.zsi-explain-list { list-style: none; margin: 0; padding: 0 12px 6px; display: grid; gap: 8px; }
.zsi-explain-list li { padding-inline-start: 10px; border-inline-start: 2px solid var(--zs-border); }
.zsi-explain-list li[data-tone='up'] { border-inline-start-color: var(--zs-bull, #089981); }
.zsi-explain-list li[data-tone='down'] { border-inline-start-color: var(--zs-bear, #f23645); }
.zsi-explain-list li[data-tone='warn'] { border-inline-start-color: #d97706; }
.zsi-explain-list p { margin: 0 0 2px; font-size: 13px; line-height: 1.55; color: var(--zs-text); }
.zsi-explain-list .zsi-src { font-size: 11px; }

/* trade setup: creation / end time, unusable data, previous-view chip */
.zsi-when { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--zs-muted); margin: 2px 0 6px; }
.zsi-note.zsi-invalid { color: var(--zsi-shock, #F23645); }
.zsi-icard.is-invalid .zsi-levels { opacity: 0.55; }
.zsi-restore {
  position: absolute; z-index: 7; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border-radius: 22px; border: 1px solid var(--zs-border-strong); background: var(--zs-bg, #fff); color: var(--zs-text); font: 500 13px var(--zs-font-institutional);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); cursor: pointer; white-space: nowrap;
}
.zsi-restore:hover { background: var(--zs-hover); }
.zsi-restore:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: 1px; }

/* ===================================================================================================
   Recommendations panel (quota, cards, locked rows) and the invitation — scoped .zsi-* / .zs-axis-alert
   =================================================================================================== */
.zsi-rbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--zs-border-strong); background: var(--zs-surface); color: var(--zs-text); font: 500 13px var(--zs-font-institutional);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, border-color 120ms ease;
}
.zsi-rbtn svg { width: 18px; height: 18px; flex: none; }
.zsi-rbtn:hover { background: var(--zs-hover); }
.zsi-rbtn:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: 2px; }
.zsi-rbtn[disabled] { opacity: 0.6; cursor: progress; }
.zsi-rbtn.primary { background: var(--zs-link); border-color: var(--zs-link); color: #fff; }
.zsi-rbtn.primary:hover { background: #1e4fd8; border-color: #1e4fd8; }
.zsi-rbtn.dark { background: var(--zs-invert-bg); border-color: var(--zs-invert-bg); color: var(--zs-invert-text); font-weight: 700; }
.zsi-rbtn.dark:hover { opacity: 0.88; background: var(--zs-invert-bg); }
.zsi-rbtn.ghost { background: transparent; }
.zsi-rbtn.ghost.is-on { border-color: var(--zs-link); color: var(--zs-link); cursor: default; background: color-mix(in srgb, var(--zs-link) 8%, transparent); }
.zsi-rbtn.block { display: flex; width: 100%; }
.zsi-rbtn.lg { min-height: 48px; border-radius: 24px; font-size: 15px; }
.zsi-rbtn.sm { min-height: 32px; padding: 0 10px; font-size: 12px; }

.zsi-quota { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--zs-border); }
.zsi-quota-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.zsi-quota-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--zs-link) 9%, transparent); color: var(--zs-text); font-size: 12.5px; font-weight: 700;
}
.zsi-quota-pill svg { width: 14px; height: 14px; }
.zsi-quota-pill.is-unlimited { background: color-mix(in srgb, var(--zs-bull) 12%, transparent); color: var(--zs-bull); }
.zsi-quota-pill.is-out { background: color-mix(in srgb, var(--zs-bear) 10%, transparent); color: var(--zs-bear); }
.zsi-quota-dots { display: inline-flex; gap: 3px; }
.zsi-quota-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.45; }
.zsi-quota-dots i.on { background: var(--zs-link); border-color: var(--zs-link); opacity: 1; }
.zsi-quota-renew { font-size: 12px; color: var(--zs-muted); white-space: nowrap; }
.zsi-quota-text { font-size: 12.5px; line-height: 1.6; color: var(--zs-text-2); flex: 1 1 180px; }
.zsi-quota-note { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--zs-muted); }
.zsi-quota-out { display: grid; gap: 6px; }
.zsi-quota-out .zsi-quota-note b { color: var(--zs-text); font-weight: 700; }
.zsi-preview-badge {
  justify-self: start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: repeating-linear-gradient(-45deg, rgba(245, 165, 36, 0.16) 0 6px, rgba(245, 165, 36, 0.08) 6px 12px); color: #b26b00;
}
.zs-ws[data-theme='dark'] .zsi-preview-badge { color: #f5b74e; }

.zsi-toast-slot { position: sticky; top: 0; z-index: 2; }
.zsi-toast { margin: 8px 12px 0; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; background: var(--zs-invert-bg); color: var(--zs-invert-text); box-shadow: var(--zs-shadow-sm); animation: zsi-in 140ms ease-out; }
.zsi-toast.t-err { background: var(--zs-bear); color: #fff; }

/* the recommendation that is on the chart: an edge bar on the reading-start side */
.zsi-reco.is-shown { box-shadow: inset -3px 0 0 var(--zs-link); }
.zs-ws[dir='ltr'] .zsi-reco.is-shown { box-shadow: inset 3px 0 0 var(--zs-link); }
.zsi-rstatus { font-weight: 500; color: var(--zs-text-2); }
.zsi-lvl { display: grid; grid-template-columns: 1fr auto 32px; align-items: center; gap: 8px; min-height: 32px; font-size: 12.5px; }
.zsi-lvl .k { display: inline-flex; align-items: center; gap: 6px; color: var(--zs-muted); min-width: 0; }
.zsi-lvl .v { color: var(--zs-text); font-weight: 500; }
.zsi-lvl.sub { min-height: 18px; font-size: 11.5px; }
.zsi-lvl.sub .v { color: var(--zs-muted); font-weight: 400; }
.zsi-lvl-bell { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--zs-muted); cursor: pointer; padding: 0; }
.zsi-lvl-bell svg { width: 18px; height: 18px; }
.zsi-lvl-bell:hover { background: var(--zs-surface); color: var(--zs-text); }
.zsi-lvl-bell:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
.zsi-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.zsi-chev { display: inline-grid; place-items: center; transition: transform 120ms ease; }
.zsi-chev.up { transform: rotate(180deg); }
.zsi-reco-details { display: grid; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--zs-border); }
/* status line: where the record stands, and whether it is on the chart */
.zsi-reco-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; min-width: 0; }
.zsi-onchart { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--zs-link); white-space: nowrap; }
.zsi-onchart svg { width: 14px; height: 14px; }
.zsi-lvl .v { font-variant-numeric: tabular-nums; text-align: end; }
/* actions: one show / hide switch across the card, then two equal buttons */
.zsi-reco-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zsi-reco-actions .span2 { grid-column: 1 / -1; }
.zsi-reco-actions .zsi-rbtn { width: 100%; min-width: 0; }
/* details tabs */
.zsi-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--zs-surface); }
.zsi-tab {
  flex: 1 1 0; min-height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--zs-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.zsi-tab:hover { color: var(--zs-text); }
.zsi-tab.is-on { background: var(--zs-bg); color: var(--zs-text); box-shadow: 0 0 0 1px var(--zs-border); }
.zsi-tab:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
.zsi-tabpanel { display: grid; gap: 8px; }
/* "when is the allowance used?" */
.zsi-quota-why {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--zs-muted); cursor: pointer;
}
.zsi-quota-why:hover, .zsi-quota-why[aria-expanded='true'] { color: var(--zs-text); background: var(--zs-hover); }
.zsi-quota-why:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: 1px; }

.zsi-gated { background: color-mix(in srgb, var(--zs-hover) 55%, transparent); }
.zsi-lock { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--zs-surface); color: var(--zs-text-2); border: 1px solid var(--zs-border); }
.zsi-gated-ghost { display: grid; gap: 6px; padding: 8px; border-radius: 6px; background: var(--zs-hover); }
.zsi-gated-ghost i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--zs-border) 0%, var(--zs-border-strong) 50%, var(--zs-border) 100%); }
.zsi-gated-ghost i:nth-child(1) { width: 78%; }
.zsi-gated-ghost i:nth-child(2) { width: 56%; }
.zsi-gated-ghost i:nth-child(3) { width: 66%; }
.zsi-gated .zsi-note { margin: 0; }

/* price-axis "+" (pointer devices only; touch uses the long-press menu instead) */
.zs-axis-alert {
  position: absolute; z-index: 6; width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--zs-border-strong); background: var(--zs-bg); color: var(--zs-text); cursor: pointer; box-shadow: var(--zs-shadow-sm);
}
.zs-axis-alert:hover { background: var(--zs-invert-bg); color: var(--zs-invert-text); border-color: var(--zs-invert-bg); }
.zs-axis-alert:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: 1px; }
@media (hover: none), (pointer: coarse) { .zs-axis-alert { display: none; } }

/* ---------- the invitation (sign up / subscribe / alerts) ----------
   Light by design in both site themes (owner 2026-11-09): a white card on warm grey, dark readable text,
   ZeroSpread lime only on the main button and small details, a light dimming behind. The chart's own tokens are
   re-pointed to light values inside the card, so every control in it (buttons, chevrons, focus) follows. */
.zsi-gate-backdrop { background: rgba(17, 20, 28, 0.3); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.zsi-gate {
  --zs-surface: #ffffff; --zs-bg: #ffffff; --zs-text: #14171f; --zs-text-2: #3b4250; --zs-muted: #646c7a;
  --zs-border: #e5e2db; --zs-border-strong: #d6d2c8; --zs-hover: #f1efea; --zs-focus: #14171f;
  --zs-invert-bg: #a3ff12; --zs-invert-text: #0d1a00; --zs-bull: #3f7d00;
  position: relative; display: flex; flex-direction: column; width: min(460px, 100%); max-height: min(92vh, 760px); overflow: hidden;
  background: #f7f6f3; color: var(--zs-text); border: 1px solid #e5e2db; border-radius: 20px; color-scheme: light;
  box-shadow: 0 2px 6px rgba(20, 23, 31, 0.06), 0 24px 64px rgba(20, 23, 31, 0.2); animation: zsi-gate-in 200ms ease-out;
}
@keyframes zsi-gate-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.zsi-gate-scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; }
.zsi-gate-grid { display: grid; gap: 16px; padding: 12px 12px 20px; }
.zsi-gate-media-col { margin: 0; display: grid; gap: 8px; }
.zsi-gate-note { margin: 0; padding-inline: 4px; font-size: 12px; line-height: 1.55; color: var(--zs-muted); }
.zsi-gate-media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #131722; }
.zsi-gate-media .zsi-demo { display: block; width: 100%; height: 100%; }
.zsi-gate-play {
  position: absolute; top: 8px; inset-inline-start: 8px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(19, 23, 34, 0.55); color: #fff; cursor: pointer;
}
.zsi-gate-play:hover { background: rgba(19, 23, 34, 0.8); }
.zsi-gate-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zsi-gate-play svg { width: 18px; height: 18px; }
/* close: on the card, outside the scroller */
.zsi-gate-x {
  position: absolute; z-index: 3; inset-block-start: 12px; inset-inline-end: 12px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 1px solid #e5e2db; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #14171f; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 23, 31, 0.12);
}
.zsi-gate-x:hover { background: #fff; }
.zsi-gate-x:focus-visible { outline: 3px solid #14171f; outline-offset: 2px; }
.zsi-gate[dir="rtl"] .zs-clip-badge, [dir="rtl"] .zsi-gate .zs-clip-badge { left: auto; right: 10px; }
.zsi-gate-body { display: grid; gap: 12px; padding: 0 10px; }
.zsi-gate-title { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 900; letter-spacing: 0; color: var(--zs-text); text-wrap: balance; }
.zsi-gate-text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--zs-text-2); }
.zsi-gate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zsi-gate-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--zs-text); }
.zsi-gate-list li svg { width: 18px; height: 18px; flex: none; color: var(--zs-bull); margin-top: 1px; }
.zsi-gate .zsi-rbtn { border-radius: 14px; }
.zsi-gate .zsi-rbtn.lg { min-height: 52px; font-size: 16px; font-weight: 900; box-shadow: 0 0 0 1px #8fe600, 0 8px 22px rgba(118, 196, 0, 0.28); }
.zsi-gate .zsi-rbtn.dark:hover { opacity: 1; background: #b2ff3a; }
.zsi-gate .zsi-rbtn.ghost { min-height: 46px; background: #fff; font-size: 14.5px; font-weight: 700; }
.zsi-gate .zsi-rbtn.ghost:hover { background: var(--zs-hover); }
.zsi-gate-learn {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border: 1px solid #e5e2db; border-radius: 14px; background: #fff;
  color: var(--zs-text); font: 800 14.5px var(--zs-font-institutional); cursor: pointer;
}
.zsi-gate-learn:hover { border-color: #c9c5bb; }
.zsi-gate-learn[aria-expanded="true"] { border-color: #b9e57a; background: #f1ffd9; }
.zsi-gate-learn:focus-visible { outline: 3px solid #14171f; outline-offset: 2px; }
.zsi-gate-details { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #e5e2db; }
.zsi-gate-details[hidden] { display: none; }
.zsi-gate-details section { display: grid; gap: 6px; }
.zsi-gate-details h3 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 900; }
.zsi-gate-details ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zsi-gate-details li { position: relative; padding-inline-start: 16px; font-size: 13.5px; line-height: 1.7; color: var(--zs-text-2); }
.zsi-gate-details li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 2px; background: #3f7d00; }
.zsi-gate-details p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--zs-text-2); }
@media (min-width: 820px) {
  .zsi-gate { width: min(900px, 100%); }
  .zsi-gate-grid { grid-template-columns: 1.15fr 1fr; align-items: start; column-gap: 26px; padding: 16px 16px 22px; }
  .zsi-gate-media-col { position: sticky; top: 0; padding-top: 2px; }
  .zsi-gate-body { padding: 6px 4px 0; }
  .zsi-gate-title { padding-inline-end: 44px; }
}

/* demo: candles grow, then the trade's levels and tags draw in (or an alert line + bell + toast) */
.zsi-demo-c, .zsi-demo-l, .zsi-demo-tag, .zsi-demo-zone, .zsi-demo-bell, .zsi-demo-toast { animation-play-state: paused; }
.is-playing .zsi-demo-c, .is-playing .zsi-demo-l, .is-playing .zsi-demo-tag, .is-playing .zsi-demo-zone, .is-playing .zsi-demo-bell, .is-playing .zsi-demo-toast { animation-play-state: running; }
.zsi-demo-c { transform-box: fill-box; transform-origin: center bottom; animation: zsi-demo-grow 4.8s ease-out infinite both; }
.zsi-demo-l { stroke-dasharray: 340; stroke-dashoffset: 340; animation: zsi-demo-draw 4.8s ease-out infinite both; }
.zsi-demo-l.l2 { animation-delay: 160ms; }
.zsi-demo-l.l3 { animation-delay: 320ms; }
.zsi-demo-l.l4 { animation-delay: 480ms; }
.zsi-demo-zone { animation: zsi-demo-fade 4.8s ease-out infinite both; }
.zsi-demo-tag { animation: zsi-demo-pop 4.8s ease-out infinite both; }
.zsi-demo-tag.t2 { animation-delay: 160ms; }
.zsi-demo-tag.t3 { animation-delay: 320ms; }
.zsi-demo-bell { transform-box: fill-box; transform-origin: center top; animation: zsi-demo-ring 4.8s ease-in-out infinite both; }
.zsi-demo-toast { animation: zsi-demo-toast 4.8s ease-out infinite both; }
@keyframes zsi-demo-grow { 0% { transform: scaleY(0.2); opacity: 0; } 12% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes zsi-demo-draw { 0%, 30% { stroke-dashoffset: 340; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes zsi-demo-fade { 0%, 35% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes zsi-demo-pop { 0%, 45% { opacity: 0; transform: translateX(8px); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes zsi-demo-ring { 0%, 50% { transform: rotate(0); } 55% { transform: rotate(14deg); } 60% { transform: rotate(-12deg); } 65% { transform: rotate(8deg); } 70%, 100% { transform: rotate(0); } }
@keyframes zsi-demo-toast { 0%, 60% { opacity: 0; transform: translateY(10px); } 72%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .zsi-gate, .zsi-toast { animation: none; }
  .zsi-rbtn, .zsi-chev { transition: none; }
  /* the demo shows its final frame instead of moving */
  .zsi-demo-c, .zsi-demo-l, .zsi-demo-tag, .zsi-demo-zone, .zsi-demo-bell, .zsi-demo-toast { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .zsi-rbtn, .zsi-rbtn.sm { min-height: 44px; }
  .zsi-lvl { grid-template-columns: 1fr auto 44px; min-height: 44px; }
  .zsi-lvl-bell { width: 44px; height: 44px; }
  .zsi-actions .zsi-rbtn { flex: 1 1 calc(50% - 6px); }
  .zsi-tab { min-height: 44px; }
  .zsi-quota-why { width: 44px; height: 44px; }
  /* the invitation becomes a bottom sheet */
  .zsi-gate { width: 100%; max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px)); border-radius: 22px 22px 0 0; border-bottom: 0; animation-name: zsi-sheet-in; }
  .zsi-gate-scroll { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .zsi-gate-grid { gap: 14px; padding: 8px 8px 16px; }
  .zsi-gate-body { padding: 0 8px; }
  .zsi-gate-x { width: 38px; height: 38px; inset-block-start: 10px; inset-inline-end: 10px; }
  .zsi-gate-title { font-size: 20px; }
}
@keyframes zsi-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* "Explain this chart": summary first, each section folds */
.zsi-explain-sum { padding: 12px; gap: 6px; border-top: 0; border-bottom: 1px solid var(--zs-border); }
.zsi-explain-sum .zsi-text { color: var(--zs-text); }
.zsi-fold > summary { list-style: none; cursor: pointer; min-height: 36px; padding: 0 12px; }
.zsi-fold > summary::-webkit-details-marker { display: none; }
.zsi-fold > summary:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
.zsi-fold[open] > summary .zsi-chev { transform: rotate(180deg); }
@media (max-width: 760px) { .zsi-fold > summary { min-height: 44px; } }

/*
 * ZS Chart — panel states, touch sizes and the current-asset mark (scoped to the chart workspace).
 * Same tokens as styles.css / intel.css. Loaded after both, so it only adds or narrows.
 */

.zs-ws {
  --zsi-ok: var(--zs-bull);
  --zsi-warn: #b26b00;
  --zsi-err: var(--zs-bear);
}
.zs-ws[data-theme='dark'] { --zsi-warn: #f5b74e; }

/* ---------- state badge (one look per state; never the layer switch) ---------- */
.zs-ws .zsi-vstate {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
  font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--zs-muted);
}
.zs-ws .zsi-vstate .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.zs-ws .zsi-vstate svg { width: 14px; height: 14px; flex: none; }
.zs-ws .zsi-vstate .zs-spin { width: 12px; height: 12px; flex: none; }
.zs-ws .zsi-vdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--zs-faint); }
.zs-ws .zsi-vstate[data-state='ready'] { color: var(--zs-text-2); }
.zs-ws .zsi-vstate[data-state='ready'] .zsi-vdot { background: var(--zsi-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zsi-ok) 18%, transparent); }
.zs-ws .zsi-vstate[data-state='stale'] { color: var(--zsi-warn); }
.zs-ws .zsi-vstate[data-state='error'] { color: var(--zsi-err); }
.zs-ws .zsi-vstate[data-state='locked'] { color: var(--zs-text-2); }
.zs-ws .zsi-vstate[data-state='unsupported'] { color: var(--zs-faint); }
.zs-ws .zsi-vstate[data-state='empty'] .zsi-vdot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--zs-faint); }

/* ---------- vision panel: one row per layer ---------- */
.zs-ws .zsi-vlist { display: grid; gap: 2px; margin: 0 -6px; }
.zs-ws .zsi-vrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px;
  min-height: 52px; border-radius: 8px;
}
.zs-ws .zsi-vrow:hover { background: color-mix(in srgb, var(--zs-hover) 70%, transparent); }
.zs-ws .zsi-vrow-open {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 4px 6px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.zs-ws .zsi-vrow-open[disabled] { cursor: default; }
.zs-ws .zsi-vrow-open:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
.zs-ws .zsi-vrow-ic {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.zs-ws .zsi-vrow-ic svg { width: 22px; height: 22px; }
.zs-ws .zsi-vrow-main { display: grid; gap: 1px; min-width: 0; }
.zs-ws .zsi-vrow-main .name { font-size: 13.5px; font-weight: 500; color: var(--zs-text); line-height: 1.45; }
.zs-ws .zsi-vrow[data-state='unsupported'] .zsi-vrow-main .name,
.zs-ws .zsi-vrow[data-state='locked'] .zsi-vrow-main .name { color: var(--zs-text-2); }
.zs-ws .zsi-vrow-act {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--zsi-err); cursor: pointer;
}
.zs-ws .zsi-vrow-act:hover { background: var(--zs-hover); }
.zs-ws .zsi-vrow-act:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
.zs-ws .zsi-vrow-lock { width: 44px; height: 44px; display: grid; place-items: center; color: var(--zs-muted); }
/* the switch keeps its 30 px look; its label is the 44 × 44 target */
.zs-ws .zsi-vswitch { position: relative; width: 48px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.zs-ws .zsi-vswitch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zs-ws .zsi-vswitch input:checked + .zsi-switch { background: var(--zs-invert-bg); }
.zs-ws .zsi-vswitch input:checked + .zsi-switch::after { transform: translateX(-12px); }
.zs-ws[dir='ltr'] .zsi-vswitch .zsi-switch::after { right: auto; left: 2px; }
.zs-ws[dir='ltr'] .zsi-vswitch input:checked + .zsi-switch::after { transform: translateX(12px); }
.zs-ws .zsi-vswitch input:focus-visible + .zsi-switch { outline: 2px solid var(--zs-focus); outline-offset: 2px; }
.zs-ws .zsi-link-row { display: flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0 2px; }

/* ---------- drawer header line ---------- */
.zs-ws .zsi-dhead {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--zs-border); background: var(--zs-bg);
}
.zs-ws .zsi-dhead-t { font-size: 13px; font-weight: 700; }
.zs-ws .zsi-dhead .zsi-src { white-space: nowrap; }
.zs-ws .zsi-dhead .zsi-rbtn svg { width: 16px; height: 16px; }
.zs-ws .zsi-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--zs-hover); color: var(--zs-text-2); font-size: 11px; font-weight: 700;
}
.zs-ws .zsi-stale-note {
  margin: 10px 12px 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.6;
  color: var(--zsi-warn); background: color-mix(in srgb, var(--zsi-warn) 10%, transparent);
}

/* ---------- empty / loading / locked / error / unsupported ---------- */
.zs-ws .zsi-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 20px 24px; text-align: center; }
.zs-ws .zsi-empty-mark {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--zs-hover); color: var(--zs-muted);
}
.zs-ws .zsi-empty-mark svg { width: 24px; height: 24px; }
.zs-ws .zsi-empty-mark[data-state='error'] { color: var(--zsi-err); background: color-mix(in srgb, var(--zsi-err) 10%, transparent); }
.zs-ws .zsi-empty-mark[data-state='locked'] { color: var(--zs-text); }
.zs-ws .zsi-empty-title { max-width: 280px; font-size: 13px; line-height: 1.7; color: var(--zs-text-2); }
.zs-ws .zsi-empty-hint { font-size: 12px; color: var(--zs-muted); }
.zs-ws .zsi-empty-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.zs-ws .zsi-empty-act .zsi-rbtn svg { width: 16px; height: 16px; }
.zs-ws .zsi-skel { width: 100%; display: grid; gap: 8px; padding: 4px 0; }
.zs-ws .zsi-skel i {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--zs-hover) 0%, var(--zs-border) 50%, var(--zs-hover) 100%); background-size: 200% 100%;
  animation: zsi-skel 1.2s ease-in-out infinite;
}
.zs-ws .zsi-skel i:nth-child(1) { width: 72%; }
.zs-ws .zsi-skel i:nth-child(2) { width: 90%; }
.zs-ws .zsi-skel i:nth-child(3) { width: 54%; }
@keyframes zsi-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- calendar groups and figures ---------- */
.zs-ws .zsi-group-h {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 12px 4px;
  font-size: 11.5px; font-weight: 700; color: var(--zs-muted);
}
.zs-ws .zsi-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
.zs-ws .zsi-fig { display: grid; gap: 1px; padding: 6px 8px; border-radius: 6px; background: var(--zs-hover); min-width: 0; }
.zs-ws .zsi-fig .k { font-size: 11px; color: var(--zs-muted); }
.zs-ws .zsi-fig b { font-size: 13px; font-weight: 600; color: var(--zs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.zs-ws .zsi-fig.is-actual { background: color-mix(in srgb, var(--zs-link) 9%, transparent); }

/* ---------- memory ---------- */
.zs-ws .zsi-info { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px; border-radius: 8px; background: var(--zs-hover); }
.zs-ws .zsi-info svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* the cards in a drawer get a little more air than the anchored inspector */
.zs-ws .zsi-idrawer > .zsi-icard, .zs-ws .zsi-idrawer .zsi-clickable > .zsi-icard { padding: 14px 12px; }
.zs-ws .zsi-idrawer .zsi-clickable { border-radius: 0; transition: background-color 120ms ease; }

/* ---------- bottom bar: ranges scroll inside their strip; status + clock never leave the screen ---------- */
.zs-ws .zs-bottom-ranges {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x;
}
.zs-ws .zs-bottom-ranges::-webkit-scrollbar { display: none; }
.zs-ws .zs-bottom-ranges > * { flex-shrink: 0; }
.zs-ws .zs-bottom > .zs-feed, .zs-ws .zs-bottom > .zs-btn, .zs-ws .zs-bottom > .zs-sep { flex: none; }
.zs-ws .zs-feed { white-space: nowrap; }

/* ---------- symbol search: the chart's current asset ---------- */
.zs-ws .zs-sym-current {
  display: flex; align-items: center; gap: 10px; margin: 0 20px 8px; padding: 8px 12px; min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--zs-link) 35%, var(--zs-border)); border-radius: 8px;
  background: color-mix(in srgb, var(--zs-link) 6%, transparent);
}
.zs-ws .zs-sym-current-l { font-size: 12px; font-weight: 700; color: var(--zs-link); white-space: nowrap; }
.zs-ws .zs-sym-current .zs-sym-name { flex: 1; min-width: 0; color: var(--zs-text-2); font-size: 13px; }
.zs-ws .zs-sym-row.is-current { background: color-mix(in srgb, var(--zs-link) 7%, transparent); }
.zs-ws .zs-sym-row.is-current .zs-sym-tk { font-weight: 700; }
.zs-ws .zs-cur-tag {
  display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 8px; padding: 0 7px; height: 20px; border-radius: 10px; vertical-align: middle;
  background: var(--zs-link); color: #fff; font-size: 11px; font-weight: 700;
}
.zs-ws .zs-cur-tag svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  .zs-ws .zs-sym-current { margin: 0 12px 8px; }
}

/* ---------- drawing tools: groups with more tools carry a corner mark ---------- */
.zs-ws .zs-tool { position: relative; }
.zs-ws .zs-tool-more {
  position: absolute; inset-inline-end: 3px; bottom: 3px; width: 6px; height: 6px; pointer-events: none;
  background: var(--zs-faint); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.zs-ws[dir='rtl'] .zs-tool-more { clip-path: polygon(0 0, 100% 100%, 0 100%); }
@media (pointer: fine) { .zs-ws .zs-tool-more { display: none; } }

/* ---------- touch (phones and tablets): every control the chart needs is at least 44 × 44 ---------- */
@media (pointer: coarse) {
  .zs-ws { --zs-touch: 44px; }
  /* the group button opens its tools on a second tap; the caret is not a touch target */
  .zs-ws .zs-tool-caret { display: none; }
  .zs-ws .zsi-link { min-height: 44px; padding: 0 4px; }
  .zs-ws .zsi-rbtn, .zs-ws .zsi-rbtn.sm { min-height: 44px; }
  .zs-ws .zsi-tab { min-height: 44px; }
  .zs-ws .zsi-lvl { grid-template-columns: 1fr auto 44px; min-height: 44px; }
  .zs-ws .zsi-lvl-bell, .zs-ws .zsi-quota-why { width: 44px; height: 44px; }
  .zs-ws .zsi-fold > summary { min-height: 44px; }
  .zs-ws .zsi-cchip { height: 32px; position: relative; }
  .zs-ws .zsi-cchip::after { content: ''; position: absolute; inset: -7px -2px; }
}
/* tablets with touch (761–1100 px): the bars grow to touch height; the drawing tools and the rail scroll if needed */
@media (pointer: coarse) and (min-width: 761px) {
  .zs-ws { --zs-top-h: 50px; --zs-bottom-h: 48px; --zs-left-w: 56px; --zs-rail-w: 52px; }
  .zs-ws .zs-top .zs-btn, .zs-ws .zs-top .zs-iv { height: 44px; min-width: 44px; }
  .zs-ws .zs-top .zs-btn.caret { width: 44px; min-width: 44px; }
  .zs-ws .zs-bottom .zs-btn { height: 44px; min-width: 44px; padding: 0 10px; }
  .zs-ws .zs-left { gap: 4px; }
  .zs-ws .zs-left .zs-tool { width: 44px; height: 44px; }
  .zs-ws .zs-left-sep { margin: 4px 0; }
  .zs-ws .zs-rail { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  .zs-ws .zs-rail::-webkit-scrollbar { display: none; }
  .zs-ws .zs-rail .zs-tool { width: 44px; height: 44px; flex: none; }
  .zs-ws .zs-side { inset-inline-end: var(--zs-rail-w); }
}
/* tablets with touch: the toolbar fits without scrolling items under the pinned alert —
   the active interval plus its menu (not five favourites), icon-only Indicators and Alert,
   and the bottom bar keeps its data-status label and time whole (only the latency figure is dropped) */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 1100px) {
  .zs-ws .zs-favs .zs-iv:not(.is-active) { display: none; }
  .zs-ws .zs-ind-l { display: none; }
  .zs-ws .zs-top-alert .zs-alert-btn > span[dir] { display: none; }
  .zs-ws .zs-top-alert .zs-alert-btn { min-width: 44px; padding: 0 10px; }
  .zs-ws .zs-bottom .zs-btn { padding: 0 6px; }
  .zs-ws .zs-feed-lat { display: none; }
  .zs-ws .zs-feed { flex: none; white-space: nowrap; }
  /* keep some air between the instrument controls and the end controls when the toolbar just fits */
  .zs-ws .zs-top-spacer { flex: 1 0 8px; }
  .zs-ws .zs-bottom-ranges { gap: 0; }
}
@media (pointer: coarse) {
  .zs-ws .zsi-cchip { min-width: 44px; justify-content: center; }
}
/* phones: the middle of the toolbar is a scroll strip (its controls need more than 320–430 px) between the fixed home +
   Dark/Light controls and the fixed alert. Items fade out at both edges of the strip instead of being cut by a hard
   edge, so it reads as scrollable; the strip's own end gutters let its first and last controls scroll clear of the fades. */
@media (max-width: 900px) {
  /* portrait tablets too: their toolbar needs ~1000 px, so it scrolls like a phone's instead of dropping tools */
  .zs-ws .zs-top-alert::before {
    content: ''; position: absolute; inset-block: 0; inset-inline-end: 100%; width: 24px; pointer-events: none;
    background: linear-gradient(to left, var(--zs-bg), transparent);
  }
  .zs-ws[dir='rtl'] .zs-top-alert::before { background: linear-gradient(to right, var(--zs-bg), transparent); }
  .zs-ws .zs-top-host::after {
    content: ''; position: absolute; inset-block: 0; inset-inline-start: 100%; width: 14px; pointer-events: none;
    background: linear-gradient(to right, var(--zs-bg), transparent);
  }
  .zs-ws[dir='rtl'] .zs-top-host::after { background: linear-gradient(to left, var(--zs-bg), transparent); }
  .zs-ws .zs-top-scroll::before { content: ''; flex: 0 0 6px; }
  .zs-ws .zs-top-scroll::after { content: ''; flex: 0 0 18px; }
}
/* phones and portrait tablets: the bottom bar itself no longer scrolls (only its ranges do), so the clock gets no fade;
   the ranges strip fades at its end instead, with room so the last range can scroll clear of the fade */
@media (max-width: 900px) {
  .zs-ws .zs-bottom-ranges {
    padding-inline-end: 20px;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px); mask-image: linear-gradient(to left, transparent 0, #000 18px);
  }
  /* the bar under the time axis is LTR in every language, so its end is always on the right */
}
/* portrait tablets scroll their ranges anyway: give each label its own air */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 900px) {
  .zs-ws .zs-bottom .zs-btn { padding: 0 10px; }
  .zs-ws .zs-bottom-ranges { gap: 2px; }
}
/* desktop and landscape tablets: the side panel docks beside the chart instead of covering it. The plot narrows
   (the engine re-measures once, on open / close), so the price axis, the last candles and the bottom bar's
   clock stay in view. Every panel kind has one width, so switching panels does not resize the chart again.
   Portrait tablets keep the overlay; phones keep the bottom sheet. */
@media (min-width: 901px) {
  .zs-ws .zs-body:has(> .zs-side) { grid-template-columns: var(--zs-left-w) minmax(0, 1fr) auto auto; }
  .zs-ws .zs-body > .zs-side {
    position: relative; inset: auto; grid-column: 3; grid-row: 1;
    width: clamp(280px, 30vw, 340px); height: auto; min-height: 0; z-index: auto; box-shadow: none;
  }
  .zs-ws .zs-body:has(> .zs-side) > .zs-right { grid-column: 4; grid-row: 1; }
}
/* a panel the host made resizable (sideResize): the reader's width, set on the element while dragging and kept
   after release. The handle sits on the edge shared with the chart: a thin line that shows on hover / focus,
   a wider invisible strip to grab, wider still for a finger. It never reaches the plot, so a drag cannot pan or zoom. */
.zs-ws .zs-side-resize { display: none; }
@media (min-width: 901px) {
  .zs-ws .zs-body > .zs-side[data-resizable] { width: var(--zs-side-w, clamp(280px, 30vw, 340px)); }
  .zs-ws .zs-side[data-resizable] > .zs-side-resize {
    display: block; position: absolute; z-index: 5; inset-block: 0; left: 0; width: 12px;
    cursor: col-resize; touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
  }
  .zs-ws .zs-side-resize-grip {
    position: absolute; top: 50%; left: 3px; width: 4px; height: 44px; margin-top: -22px; border-radius: 2px;
    background: var(--zs-border-strong); opacity: 0.55; transition: opacity 120ms ease, background-color 120ms ease, height 120ms ease;
  }
  .zs-ws .zs-side-resize::before { content: ''; position: absolute; inset-block: 0; left: 0; width: 1px; background: transparent; transition: background-color 120ms ease; }
  .zs-ws .zs-side-resize:hover .zs-side-resize-grip, .zs-ws .zs-side[data-resizing] .zs-side-resize-grip,
  .zs-ws .zs-side-resize:focus-visible .zs-side-resize-grip { opacity: 1; background: var(--zs-link); height: 64px; margin-top: -32px; }
  .zs-ws .zs-side-resize:hover::before, .zs-ws .zs-side[data-resizing] .zs-side-resize::before, .zs-ws .zs-side-resize:focus-visible::before { background: var(--zs-link); }
  .zs-ws .zs-side-resize:focus-visible .zs-side-resize-grip { box-shadow: 0 0 0 2px var(--zs-focus); }
  /* while dragging: no text selection or hover effects under the pointer, and the cursor stays the resize one */
  .zs-ws:has(.zs-side[data-resizing]) { cursor: col-resize; user-select: none; -webkit-user-select: none; }
  .zs-ws:has(.zs-side[data-resizing]) .zs-side-body { pointer-events: none; }
}
@media (min-width: 901px) and (pointer: coarse) {
  .zs-ws .zs-side[data-resizable] > .zs-side-resize { width: 24px; }
  .zs-ws .zs-side-resize-grip { left: 4px; width: 5px; opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-ws .zs-side-resize-grip, .zs-ws .zs-side-resize::before { transition: none; }
}
/* phones: rows in the vision sheet are full touch height */
@media (max-width: 760px) {
  .zs-ws .zsi-vrow { min-height: 56px; }
  .zs-ws .zsi-dhead { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .zs-ws .zsi-skel i { animation: none; }
  .zs-ws .zsi-idrawer .zsi-clickable { transition: none; }
}