/* ==========================================================================
   ChartIntels - stylesheet
   Dark-first: the bare :root block carries the DARK palette, because a
   trading screen is read in a dark room more often than not. Light is
   redefined below for viewers whose system or app says light.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg:          #0B0F14;
  --surface:     #131A22;
  --surface-2:   #1A232D;
  --line:        #25313E;
  --line-soft:   #1B242E;

  --text:        #E6EDF3;
  --text-dim:    #8FA0B2;
  --text-faint:  #64768A;

  /* amber for chrome and anything interactive - deliberately not green,
     so it can never be mistaken for an "up" signal */
  --accent:      #F0A830;
  --accent-ink:  #191104;
  --accent-soft: rgba(240,168,48,.14);

  /* market semantics, DSE convention */
  --up:          #2BB673;
  --down:        #E5484D;
  --flat:        #7C8B9C;
  --up-soft:     rgba(43,182,115,.13);
  --down-soft:   rgba(229,72,77,.13);

  --sans: 'IBM Plex Sans', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Noto Sans Bengali', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:   10px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:          #F6F8FA;
    --surface:     #FFFFFF;
    --surface-2:   #EFF3F7;
    --line:        #DBE3EB;
    --line-soft:   #E9EEF3;
    --text:        #0F1720;
    --text-dim:    #54677A;
    --text-faint:  #7D8FA1;
    --accent:      #9A5B00;
    --accent-ink:  #FFF6E8;
    --accent-soft: rgba(154,91,0,.10);
    --up:          #0F7A4A;
    --down:        #BE2A2E;
    --flat:        #6A7B8C;
    --up-soft:     rgba(15,122,74,.10);
    --down-soft:   rgba(190,42,46,.10);
    --shadow: 0 1px 2px rgba(16,24,32,.06), 0 8px 24px -18px rgba(16,24,32,.28);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #F6F8FA;
  --surface:     #FFFFFF;
  --surface-2:   #EFF3F7;
  --line:        #DBE3EB;
  --line-soft:   #E9EEF3;
  --text:        #0F1720;
  --text-dim:    #54677A;
  --text-faint:  #7D8FA1;
  --accent:      #9A5B00;
  --accent-ink:  #FFF6E8;
  --accent-soft: rgba(154,91,0,.10);
  --up:          #0F7A4A;
  --down:        #BE2A2E;
  --flat:        #6A7B8C;
  --up-soft:     rgba(15,122,74,.10);
  --down-soft:   rgba(190,42,46,.10);
  --shadow: 0 1px 2px rgba(16,24,32,.06), 0 8px 24px -18px rgba(16,24,32,.28);
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 16px;
}

code, .mono { font-family: var(--mono); }

/* ---------- top bar ---------------------------------------------------- */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-block: 9px;
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  width: 10px; height: 21px; flex: none; border-radius: 2px;
  background: linear-gradient(to top, var(--up) 0 38%, var(--accent) 38% 70%, var(--down) 70% 100%);
}
.brand-name {
  font-weight: 700; letter-spacing: .015em; font-size: 16.5px;
  white-space: nowrap;
}

/* The market state, as a square. Green open, red shut - the one fact worth
   seeing without reading a word. A ring pulses while trading is live. */
.mstate {
  width: 10px; height: 10px; flex: none; border-radius: 3px;
  background: var(--line); margin-left: 3px; position: relative;
}
.mstate.open { background: var(--up); }
.mstate.shut { background: var(--down); }
.mstate.open::after {
  content: ""; position: absolute; inset: -3px; border-radius: 5px;
  border: 1px solid var(--up); opacity: .45;
  animation: mpulse 2.4s ease-in-out infinite;
}
@keyframes mpulse { 0%, 100% { opacity: .45; } 50% { opacity: .06; } }

.topbar .clock {
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
}

/* the one headline row: index, change, turnover, session */
.headline { padding-bottom: 8px; }
/* The whole line sits on the page's centre, date included - one balanced
   row rather than a left group and a right one. */
.hl {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.hl-k {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-faint);
}
.hl-v { font-weight: 600; font-size: 13.5px; }
.hl-c { font-weight: 600; }
.hl-c.up { color: var(--up); }
.hl-c.down { color: var(--down); }
.hl-c.flat { color: var(--text-dim); }
.hl-t { color: var(--text-dim); }
.hl-d { color: var(--text-faint); white-space: nowrap; }
.hl.stale .hl-v, .hl.stale .hl-t { color: var(--text-faint); }
.hl-stale {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; line-height: 14px;
}
.hl-stale.warn {
  color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent);
  font-weight: 600;
}
@keyframes lvbeat { from { opacity: .35; } to { opacity: 1; } }
.hl.beat { animation: lvbeat .5s ease; }

.badge-demo {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  padding: 3px 7px; border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  white-space: nowrap;
}
.pill {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 13px; border-radius: 999px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill.is-open { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-soft); }

/* ---------- index strip ------------------------------------------------ */
.indices {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-block: 14px 4px;
  scrollbar-width: none;
}
.indices::-webkit-scrollbar { display: none; }
.idx {
  flex: 1 0 auto;
  min-width: 132px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 11px;
}
.idx-name {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--text-faint); text-transform: uppercase;
}
.idx-val {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.idx-chg { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

/* ---------- command console -------------------------------------------- */
.console { padding-block: 14px 4px; }

.cmdbar {
  display: flex; align-items: center; gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .15s ease;
}
.cmdbar:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.slash {
  font-family: var(--mono); font-size: 18px; font-weight: 600;
  color: var(--accent);
  padding: 0 4px 0 14px;
  user-select: none;
}
#cmdInput {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--text);
  font-family: var(--mono); font-size: 15px;
  padding: 13px 10px 13px 4px;
}
#cmdInput::placeholder { color: var(--text-faint); }
.run {
  flex: none;
  border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 13px 18px;
  transition: filter .15s ease;
}
.run:hover { filter: brightness(1.08); }
.run:active { filter: brightness(.94); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 10px; }
.chip {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-2); }

/* ---------- result cards ----------------------------------------------- */
.result { display: flex; flex-direction: column; gap: 14px; padding-block: 6px 8px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

/* the interpretation echo - what the parser thought you asked */
.echo {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 13px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.echo b { color: var(--text-dim); font-weight: 500; }
.echo .warn { color: var(--accent); }

.card-body { padding: 13px; }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 13px 13px 0;
}
.card-title { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.card-sub { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* price header */
.quote { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quote-px {
  font-family: var(--mono); font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.quote-chg { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }

/* stat grid */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-top: 13px;
}
.stat { background: var(--surface); padding: 9px 12px; }
.stat-k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.stat-v {
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* conditions list */
.conds { display: flex; flex-direction: column; }
.cond {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.cond:last-child { border-bottom: 0; }
.cond-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
  flex: none; width: 74px;
}
.cond-v { flex: 1; min-width: 0; }
.cond-v .mono { font-variant-numeric: tabular-nums; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
table.tbl th {
  text-align: right; font-weight: 500; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 8px 13px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
table.tbl td {
  text-align: right; padding: 7px 13px;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: var(--surface-2); }
.tkr { font-weight: 600; cursor: pointer; }
.tkr:hover { color: var(--accent); }

.group-row td {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
}

/* chart */
.chart-box { padding: 4px 6px 10px; }
canvas.chart { display: block; width: 100%; max-width: 100%; height: auto; }
.legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 0 13px 11px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
}
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }

/* notes + empty */
.note {
  font-size: 12px; color: var(--text-faint);
  padding: 9px 13px;
  border-top: 1px solid var(--line-soft);
  font-style: italic;
}
.miss { padding: 16px 13px; color: var(--text-dim); font-size: 13.5px; }
.miss code { color: var(--accent); }

/* fundamentals */
.funda-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line-soft);
}
.funda-cell { background: var(--surface); padding: 10px 13px; }
.bar {
  height: 5px; border-radius: 3px; background: var(--surface-2);
  margin-top: 6px; overflow: hidden;
}
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------- footer ------------------------------------------------------ */
.foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 10px;
  padding-block: 16px 28px;
  color: var(--text-faint);
  font-size: 12.5px;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 62ch;
}
.foot code { color: var(--text-dim); font-size: 11.5px; }
.foot-warn { color: var(--text-dim); }
.foot-warn strong { color: var(--accent); font-weight: 600; }
.foot-meta { font-family: var(--mono); font-size: 11px; }

@media (max-width: 460px) {
  .quote-px { font-size: 26px; }
  .cond { flex-direction: column; gap: 2px; }
  .cond-k { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---------- added with the live API ------------------------------------- */
table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }

.group-row td {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  text-align: left;
}

.note.meta { font-family: var(--mono); font-size: 11px; font-style: normal; }

.miss.loading { color: var(--text-faint); }
.miss b { color: var(--text); }

.echo .warn { color: var(--accent); }

/* the "where is the server" panel */
.apibox { margin-top: 14px; }
.apibox label {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px;
}
.apirow { display: flex; gap: 8px; flex-wrap: wrap; }
.apirow input {
  flex: 1 1 220px; min-width: 0;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font-family: var(--mono); font-size: 13px;
}
.apirow input:focus { outline: 0; border-color: var(--accent); }
.apirow button {
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 9px 16px;
}
.apibox p {
  margin: 8px 0 0; font-size: 11.5px; color: var(--text-faint);
}

.cond { border-bottom: 1px solid var(--line-soft); }
.conds .cond .cond-v { padding-block: 1px; }

/* ==========================================================================
   Views, board, chart panels, screener
   ========================================================================== */

/* ---- tabs -------------------------------------------------------------- */
.tabs {
  display: flex; gap: 4px;
  padding: 12px 0 2px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.tab:hover { color: var(--text); }
.tab.is-on {
  color: var(--accent-ink); background: var(--accent);
  border-color: var(--accent); font-weight: 600;
}
.view { display: flex; flex-direction: column; gap: 14px; padding-block: 12px 4px; }

/* ---- segmented control ------------------------------------------------- */
.seg { display: flex; gap: 0; flex-wrap: wrap; }
.seg button {
  border: 1px solid var(--line); border-right-width: 0;
  background: var(--surface); color: var(--text-dim);
  font-family: var(--mono); font-size: 11px;
  padding: 6px 11px; cursor: pointer;
}
.seg button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.seg button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-right-width: 1px; }
.seg button.is-on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.seg button:hover { color: var(--text); }

.card-head.tight { padding-bottom: 10px; align-items: center; }

/* ---- filters ----------------------------------------------------------- */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 13px 11px;
}
.filters input, .filters select,
.screenform input, .screenform select, .chartbar input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px;
  font-family: var(--mono); font-size: 13px;
  min-width: 0;
}
.filters input { flex: 1 1 150px; }
.filters select { flex: 0 1 auto; }
.filters input:focus, .filters select:focus,
.screenform input:focus, .screenform select:focus,
.chartbar input:focus { outline: 0; border-color: var(--accent); }

/* ---- sector strip ------------------------------------------------------ */
.sectorstrip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 1px; background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
.sec {
  background: var(--surface); padding: 8px 11px; cursor: pointer;
  border-left: 2px solid transparent;
}
.sec:hover { background: var(--surface-2); }
.sec-n { font-size: 11.5px; color: var(--text-dim); }
.sec-v {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.sec.up   { border-left-color: var(--up); }
.sec.down { border-left-color: var(--down); }

/* ---- board table ------------------------------------------------------- */
table.tbl.sticky thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
}
.tbl-wrap { max-height: 70vh; overflow: auto; }
tr.row { cursor: pointer; }
tr.row.is-open td { background: var(--surface-2); }
td.chip-cell { white-space: nowrap; }
.mini {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  padding: 1px 5px; border-radius: 3px; letter-spacing: .04em;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.mini.up   { color: var(--up);   border-color: color-mix(in srgb, var(--up) 40%, transparent);   background: var(--up-soft); }
.mini.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); background: var(--down-soft); }

/* expanded detail row */
tr.detail > td { padding: 0 !important; background: var(--bg); }
.detail-in { padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }
.detail-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.detail-px { font-family: var(--mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.conds-grid { display: flex; flex-direction: column; gap: 5px; }
.conds-grid div {
  font-size: 13px; padding-left: 13px; position: relative; color: var(--text);
}
.conds-grid div::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint);
}
.detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-actions button {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-dim); font-family: var(--mono); font-size: 11px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
}
.detail-actions button:hover { color: var(--accent); border-color: var(--accent); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px,1fr)); gap: 8px; }
.kv > div { }
.kv .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.kv .v { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- chart ------------------------------------------------------------- */
.chartbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 13px 13px 8px; }
.chartbar input { flex: 1 1 130px; text-transform: uppercase; }
.toggles {
  display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center;
  padding: 0 13px 10px;
  font-size: 12px; color: var(--text-dim);
}
.toggles label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.toggles input { accent-color: var(--accent); }
.tog-sep { width: 1px; height: 14px; background: var(--line); }
.chart-head {
  padding: 0 13px 8px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.chart-head .px { font-family: var(--mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-head .nm { font-weight: 600; font-size: 14px; }
.chart-head .sub { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }

/* ---- screener ---------------------------------------------------------- */
.screenform {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px; padding: 0 13px 12px;
}
.fgroup label {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 4px;
}
.fgroup input, .fgroup select { width: 100%; }
.pair { display: flex; gap: 6px; }
.pair input { width: 50%; }
.screenactions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 0 13px 13px; border-top: 1px solid var(--line-soft); padding-top: 12px;
}
.ghost {
  border: 1px solid var(--line); background: transparent; color: var(--text-dim);
  font-family: var(--sans); font-size: 13px; padding: 9px 14px;
  border-radius: var(--r-sm); cursor: pointer;
}
.ghost:hover { color: var(--text); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.presets button {
  border: 1px dashed var(--line); background: transparent;
  color: var(--text-faint); font-size: 11.5px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
.presets button:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.applied {
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  padding: 9px 13px; background: var(--surface-2);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.applied b { color: var(--text-dim); font-weight: 500; }

@media (max-width: 460px) {
  .presets { margin-left: 0; }
  .tbl-wrap { max-height: none; }
  .detail-px { font-size: 19px; }
}

/* `hidden` must beat the view's own display, or every view paints at once */
[hidden] { display: none !important; }

/* ==========================================================================
   Ticker strip and the condition builder
   ========================================================================== */

/* ---- ticker ------------------------------------------------------------ */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  padding: 6px 0;
  position: relative;
}
.ticker::after {           /* fade the right edge so items leave cleanly */
  content: ""; position: absolute; inset: 0 0 0 auto; width: 48px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
}
.ticker-track {
  display: inline-flex; gap: 8px;
  white-space: nowrap;
  will-change: transform;
  animation: tick 720s linear infinite;   /* half the 29c speed */
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}
.tik {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 11.5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  cursor: pointer;
}
.tik b { font-weight: 600; color: var(--text); }
.tik span { font-variant-numeric: tabular-nums; }
.tik.up   { border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.tik.down { border-color: color-mix(in srgb, var(--down) 35%, transparent); }

/* ---- condition builder ------------------------------------------------- */
.builder { display: flex; flex-direction: column; gap: 8px; padding: 0 13px 12px; }
.cond-row {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.2fr) auto;
  gap: 8px; align-items: center;
}
.cond-row select, .cond-row input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; font-family: var(--mono); font-size: 12.5px;
  min-width: 0; width: 100%;
}
.cond-row select:focus, .cond-row input:focus { outline: 0; border-color: var(--accent); }
.cond-row .drop {
  border: 1px solid var(--line); background: transparent; color: var(--text-faint);
  border-radius: var(--r-sm); cursor: pointer; padding: 7px 10px;
  font-size: 14px; line-height: 1;
}
.cond-row .drop:hover { color: var(--down); border-color: var(--down); }
.cond-empty {
  font-size: 12.5px; color: var(--text-faint); font-style: italic;
  padding: 4px 0 2px;
}
.sortby {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
}
.sortby select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 9px;
  font-family: var(--mono); font-size: 12px; max-width: 160px;
}
.ghost.tiny { padding: 6px 9px; font-size: 11px; line-height: 1; }
.presets { padding: 0 13px 13px; }

@media (max-width: 560px) {
  .cond-row { grid-template-columns: 1fr 1fr; grid-template-areas: "f f" "o v" "d d"; }
  .cond-row > :nth-child(1) { grid-area: f; }
  .cond-row > :nth-child(2) { grid-area: o; }
  .cond-row > :nth-child(3) { grid-area: v; }
  .cond-row > :nth-child(4) { grid-area: d; justify-self: end; }
  .sortby { margin-left: 0; }
}

/* ---- chart readout and crosshair affordances --------------------------- */
.chart-readout {
  padding: 0 13px 6px;
  min-height: 18px;
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim);
}
.readout { display: flex; flex-wrap: wrap; gap: 3px 13px; }
.readout .ro { font-variant-numeric: tabular-nums; }
.readout .ro i {
  font-style: normal; color: var(--text-faint);
  margin-right: 4px; font-size: 10px; letter-spacing: .04em;
}
.readout .ro.up { color: var(--up); }
.readout .ro.down { color: var(--down); }
canvas.chart { cursor: crosshair; touch-action: none; }
.legend .hint { color: var(--text-faint); font-style: italic; }

/* ---- timeframe row ----------------------------------------------------- */
.chartbar.tfbar { padding-top: 0; padding-bottom: 8px; }
.tfnote { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }

/* ==========================================================================
   Watchlist
   ========================================================================== */
.tab-n {
  font-family: var(--mono); font-size: 10px; opacity: .75;
  margin-left: 2px;
}

.wlist { display: flex; flex-direction: column; }
.wrow {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 10px; align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.wrow:last-child { border-bottom: 0; }
.wrow:hover { background: var(--surface-2); }

.w-main { min-width: 0; }
.w-name {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
}
.w-cat {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0 4px; line-height: 14px;
}
.w-cat.a { color: var(--up);   border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.w-cat.z { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.w-sub {
  /* wraps between whole figures rather than cutting one in half - the
     trade count was being eaten by an ellipsis at phone width */
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  margin-top: 3px; font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; gap: 0 4px; line-height: 1.45;
}
.w-sub > span { white-space: nowrap; }
.w-sub .w-n { opacity: .55; }
.w-chg {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.w-right { text-align: right; min-width: 92px; }
.w-px {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.w-pill {
  display: inline-block; margin-top: 4px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: var(--r-sm);
  color: #fff;
}
.w-pill.up   { background: var(--up); }
.w-pill.down { background: var(--down); }
.w-pill.flat { background: var(--flat); }

.heart {
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
  font-size: 14px; line-height: 1; color: var(--line);
}
.heart.on { color: var(--down); }
.heart:hover { color: var(--down); opacity: .8; }

.w-empty { padding: 22px 13px; color: var(--text-dim); font-size: 13.5px; }
.w-empty code { color: var(--accent); }

@media (max-width: 460px) {
  .wrow { grid-template-columns: minmax(0,1fr) auto; }
  .w-chg { display: none; }
}

/* --------------------------------------------------------------- banner --
   Shown only when the page detects it is broken: a script error, a missing
   control, or an index.html and script.js that came from different builds.
   Loud on purpose - the failure it replaces was silent.                    */
.bootbanner {
  position: sticky; top: 0; z-index: 90;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--down); color: #fff;
  font-size: 13px; line-height: 1.4;
}
.bootbanner b { font-weight: 600; }
.bootbanner span { opacity: .9; font-size: 12px; font-family: var(--mono); }

.buildstamp { font-family: var(--mono); font-size: 11px; opacity: .55; }

/* ======================================================= market summary ==
   The figures dsebd puts at the top of its markets page, in the shape of an
   app's summary card: label above, figure below, origin underneath. Four
   across on a desk, two on a phone - never one, because these read as pairs. */
.sumgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
}
.sumcell {
  padding: 13px 15px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.sumcell:nth-child(3n) { border-right: 0; }
.sumgrid > .sumcell:nth-last-child(-n+3) { border-bottom: 0; }

.sum-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
}
.sum-v {
  /* wraps between the currency, the figure and the unit, never inside the
     figure - market capitalisation is long enough to need the room */
  font-family: var(--mono); font-size: 21px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.25;
  margin-top: 5px; white-space: normal; overflow-wrap: break-word;
}
.sum-v .n { white-space: nowrap; }
.sum-v .unit { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.sum-c {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.sum-s { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.sum-breadth { display: flex; align-items: baseline; gap: 5px; }
.sum-breadth b { font-family: var(--mono); font-weight: 600; }
.sum-breadth .adv { color: var(--up); }
.sum-breadth .dec { color: var(--down); }
.sum-breadth .unc { color: var(--text-dim); }
.sum-breadth i { color: var(--text-faint); font-style: normal; font-weight: 400; }

.sumnote {
  padding: 9px 15px 12px; font-size: 11.5px; color: var(--text-faint);
  line-height: 1.5;
}

/* ========================================================== index chart ==
   One index, plainly drawn: the line, its own fill, and the readout the
   cursor lands on. It is a summary, so it carries no indicators.          */
.ixbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 13px 9px; flex-wrap: wrap;
}
.ixread {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ixbox { position: relative; height: 210px; padding: 0 4px 10px; }
.ixbox canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }

/* ============================================================== tab bar ==
   Fixed to the bottom on every size, the way an app's tab bar is - it does
   not scroll away, because it is how you move between views.              */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 14px rgba(0, 0, 0, .06);
}
.tabbar .tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px 7px;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  letter-spacing: .01em; color: var(--text-faint);
  -webkit-tap-highlight-color: transparent;
  transition: color .12s ease;
}
.tabbar .tab svg { width: 21px; height: 21px; fill: currentColor; }
.tabbar .tab:hover { color: var(--text-dim); }
.tabbar .tab.is-on { color: var(--accent); }
.tabbar .tab.is-on::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 26px; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--accent); transform: translateX(-50%);
}
.tabbar .tab-n {
  position: absolute; top: 4px; left: 50%; margin-left: 5px;
  font-family: var(--mono); font-size: 9px; font-style: normal;
  font-weight: 600; color: #fff; background: var(--accent);
  border-radius: 8px; padding: 0 4px; line-height: 13px; min-width: 13px;
  text-align: center;
}
.tabbar .tab-n:empty { display: none; }

/* room for the bar, so the last card is never trapped underneath it */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 620px) {
  .sumgrid { grid-template-columns: repeat(2, 1fr); }
  .sumcell:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .sumcell:nth-child(2n) { border-right: 0; }
  .sumgrid > .sumcell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .sumgrid > .sumcell:nth-last-child(-n+2) { border-bottom: 0; }
  .sum-v { font-size: 18px; }
  .ixbox { height: 180px; }
}

/* ===================================================== live header block ==
   The clock and the index line the header carries on every view. The clock
   runs off the server's own time, corrected on each poll, so it never drifts
   away from the sessions the data is stamped with.                          */
.livehead {
  display: flex; flex-direction: column; align-items: center;
  justify-self: center; min-width: 0; line-height: 1.15;
}
.clock {
  font-family: var(--mono); font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  white-space: nowrap;
}
.liveline {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 3px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lv-k {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-faint);
}
.lv-v { font-weight: 600; }
.lv-c { font-weight: 600; }
.lv-c.up   { color: var(--up); }
.lv-c.down { color: var(--down); }
.lv-c.flat { color: var(--text-dim); }
.lv-dot { color: var(--line); }
.lv-t { color: var(--text-dim); }

/* a soft pulse each time the figures actually change, so a minute's update
   is visible without anything jumping about */
@keyframes lvbeat { from { opacity: .35; } to { opacity: 1; } }
.liveline.beat { animation: lvbeat .5s ease; }

/* stale means the poller has stopped, and that must not look like calm */
.liveline.stale .lv-v,
.liveline.stale .lv-t { color: var(--text-faint); }
.livehead .lv-stale {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 1px; white-space: nowrap;
}
.livehead .lv-stale.warn { color: var(--down); font-weight: 600; }

/* the ticker rides inside the header now, so it stays put with it */
.topbar .ticker { border-bottom: 0; border-top: 1px solid var(--line-soft); }

@media (max-width: 720px) {
  .topbar-in {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand pill" "live live";
    row-gap: 7px;
  }
  .brand { grid-area: brand; }
  .topbar-right { grid-area: pill; }
  /* the clock stays above the index line here too - it is the shape the
     header is meant to have, and it costs about fifteen pixels */
  .livehead { grid-area: live; }
  .clock { font-size: 16px; }
  .liveline { margin-top: 2px; font-size: 11.5px; gap: 5px; }
  .brand-name { font-size: 15px; }
}

/* the price scale only announces itself when it is no longer fitting */
.readout .scale-note { color: var(--accent); font-size: 11.5px; }

/* the chart is showing a bar that has not closed yet */
.formtag {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--r-sm); padding: 2px 6px; white-space: nowrap;
}
.eodtag {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
}

/* ======================================================== indicator bar ==
   The list of what is on the chart, each with its own settings. Chips
   rather than a menu, so what is active is visible without opening
   anything.                                                              */
.indbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 13px 9px;
}
.indchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
}
.indchip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.indchip b { font-weight: 500; }
.indchip button {
  border: 0; background: transparent; cursor: pointer; padding: 1px 3px;
  color: var(--text-faint); font-size: 11px; line-height: 1;
  border-radius: 3px;
}
.indchip button:hover { color: var(--text); background: var(--surface); }
.indadd {
  border: 1px dashed var(--line); background: transparent; cursor: pointer;
  border-radius: var(--r-sm); padding: 4px 10px;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
}
.indadd:hover { border-color: var(--accent); color: var(--accent); }

.tfnotewrap { padding: 0 13px 8px; }
.seg.tf { flex-wrap: wrap; }

/* the settings and picker popovers */
.indpop {
  position: fixed; z-index: 200; min-width: 200px; max-width: 280px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}
.indpop-h {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 2px 0 7px;
}
.indpop-h + .indopts { margin-bottom: 10px; }
.indopts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.indopt {
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer;
  border-radius: var(--r-sm); padding: 6px 8px; text-align: left;
  font-family: inherit; font-size: 12px; color: var(--text);
}
.indopt:hover { border-color: var(--accent); color: var(--accent); }
.indrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--text-dim);
}
.indrow input[type="number"] {
  width: 74px; padding: 4px 6px; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
}
.indrow input[type="color"] {
  width: 40px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer;
}
.indpop-act { display: flex; justify-content: flex-end; margin-top: 8px; }

@media (max-width: 560px) {
  .indopts { grid-template-columns: 1fr; }
  .indpop { max-width: calc(100vw - 24px); }
}

/* ======================================================== drawing tools ==
   A palette rather than a menu: the tool in use is visible without opening
   anything, which matters when the next click is going to put a line on
   the chart.                                                             */
.drawbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 0 13px 10px;
}
.drawbar .tool {
  width: 30px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  color: var(--text-dim); font-size: 14px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.drawbar .tool:hover { background: var(--surface-2); color: var(--text); }
.drawbar .tool.is-on {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.tool-sep {
  width: 1px; height: 18px; background: var(--line); margin: 0 5px; flex: none;
}
.tool-col { display: inline-flex; align-items: center; }
.tool-col input[type="color"] {
  width: 30px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.tool-n {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  margin-left: 6px;
}

.drawtoast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(8px);
  z-index: 300; max-width: min(460px, calc(100vw - 32px));
  background: var(--down); color: #fff;
  font-size: 12.5px; line-height: 1.45;
  padding: 9px 14px; border-radius: var(--r-md);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.drawtoast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------- bar replay -- */
.replaybar { padding-top: 0; gap: 4px; }
.replaybar .tool { width: auto; min-width: 30px; padding: 0 9px; font-size: 12px; }
.rp-msg {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  margin-left: 4px;
}
.rp-speed {
  font-family: var(--mono); font-size: 11px; padding: 3px 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.formtag.rp {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 12%, transparent);
  border-color: color-mix(in srgb, var(--down) 34%, transparent);
}

/* ===================================================== chart bar, compact ==
   One button per group. The whole toolbar is a single line on a phone,
   which is what the chips could never be.                                  */
.cbtn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cbtn:hover { border-color: var(--accent); color: var(--accent); }
.cbtn b { font-family: var(--mono); font-weight: 600; }
.cbtn .caret { font-style: normal; font-size: 9px; opacity: .55; }
.cbtn .cnum {
  font-family: var(--mono); font-style: normal; font-size: 10px;
  font-weight: 600; color: #fff; background: var(--accent);
  border-radius: 7px; padding: 0 5px; line-height: 14px; min-width: 14px;
  text-align: center;
}
.cbtn .cnum:empty { display: none; }
.cbtn.icon { padding: 0 9px; font-size: 14px; }
.cbtn.armed {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
#toolIcon { font-size: 14px; line-height: 1; }

/* rows inside the indicator panel */
.plrow {
  display: flex; align-items: center; gap: 7px; padding: 4px 2px;
  font-family: var(--mono); font-size: 12px;
}
.plrow b { font-weight: 500; flex: 1; min-width: 0; }
.plrow .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.plbtn {
  width: 22px; height: 22px; flex: none; border: 0; background: transparent;
  color: var(--text-faint); cursor: pointer; border-radius: 4px; font-size: 11px;
}
.plbtn:hover { background: var(--surface-2); color: var(--text); }
.plnone { color: var(--text-faint); font-size: 11.5px; padding: 3px 2px; }
.indpop-act { justify-content: space-between; align-items: center; }

/* the tool list reads as a list, not a grid of glyphs */
.indopts.tools { grid-template-columns: 1fr 1fr; }
.indopts.tools .indopt {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px;
}
.indopt.is-on {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.indopt .ti { font-size: 13px; width: 14px; text-align: center; }

.chartbar { flex-wrap: wrap; gap: 6px; }
.chartbar input[type="search"] { min-width: 90px; }

@media (max-width: 560px) {
  .topbar .clock { font-size: 14.5px; }
  .brand-name { font-size: 15px; }
  .hl { font-size: 11.5px; gap: 6px; }
  .cbtn { height: 30px; padding: 0 8px; font-size: 12px; }
  .chartbar input[type="search"] { flex: 1 1 100%; min-width: 0; }
}

/* the caret that opens the rest of the readout */
.romore {
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-faint); cursor: pointer;
  width: 20px; height: 18px; border-radius: var(--r-sm);
  font-size: 9px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, color .15s ease;
}
.romore:hover { color: var(--text); border-color: var(--accent); }
.romore.on { transform: rotate(180deg); color: var(--accent); border-color: var(--accent); }
.ro-rest { display: contents; }

/* ================================================== expression builder ==
   Two sides and an operator. Each side can be a number or an indicator
   with its own arguments, so a row carries more controls than the old
   fixed form - which is why it wraps rather than scrolls sideways.      */
.cond-row2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.cond-row2:last-child { border-bottom: 0; }
.side {
  display: flex; align-items: center; gap: 4px; flex: 1 1 240px; min-width: 0;
}
.side select, .side input {
  font-family: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); min-width: 0;
}
.side select { flex: 1 1 auto; }
.side input[data-act="num"] { flex: 1 1 auto; font-family: var(--mono); }
.side .argb {
  width: 54px; flex: none; font-family: var(--mono); text-align: center;
}
.backb {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10.5px; color: var(--text-faint);
}
.backb input { width: 46px; font-family: var(--mono); text-align: center; }
.opsel {
  flex: 0 1 150px; font-family: inherit; font-size: 12.5px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font-weight: 500;
}
.swapb {
  flex: none; width: 28px; height: 28px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-dim); font-size: 12px;
}
.swapb:hover { border-color: var(--accent); color: var(--accent); }

.screentf {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 2px 0 12px;
}
.screentf label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.screentf select {
  font-family: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
}
.tfhint { font-size: 11.5px; color: var(--text-faint); }
.applied .skip { color: var(--down); }

@media (max-width: 620px) {
  .side { flex: 1 1 100%; }
  .opsel { flex: 1 1 100%; }
  .cond-row2 { gap: 5px; }
}

/* ============================================ ADVANCED SCREENER (2026-09-28b)
   His AFL prints twenty-odd columns. All of them fit on a desktop and
   none of them fit on a phone, so the table scrolls sideways with the
   script name pinned, and any column can be switched off.

   Selectors are written as `table.advtbl td` rather than `.advtbl td`
   on purpose: the base table rules are `table.tbl td`, and anything less
   specific loses to them silently. */
#screenAdv .advnote{
  font-size:12.5px; line-height:1.55; color:var(--text-dim);
  border-left:2px solid var(--line); padding:2px 0 2px 10px; margin:2px 0 14px;
}
.advbar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin-bottom:12px;
}
.advf{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.advf>span{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-dim); font-weight:600;
}
.advf select,.advf input{
  width:100%; padding:9px 10px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--text);
  font:inherit; font-size:13px; min-width:0;
}
.advf.narrow{ max-width:180px; }

.advwidths{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.advlbl{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-dim); font-weight:600;
}
.wchip{
  min-width:34px; padding:5px 9px; margin-right:5px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  font:inherit; font-size:12px; font-variant-numeric:tabular-nums; cursor:pointer;
}
.wchip.is-on{ border-color:var(--accent); color:var(--text); background:var(--surface-2); }
.wchip.alt{ font-style:italic; }

.advtoggles{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.advtoggles label{
  display:flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--text-dim); cursor:pointer;
}
.advtoggles input{ width:15px; height:15px; accent-color:var(--accent); }

.advcolpick{
  border:1px solid var(--line); border-radius:var(--r); padding:11px;
  margin:0 0 12px; background:var(--surface);
}
.advcolhead{ font-size:11.5px; color:var(--text-dim); margin-bottom:9px; }
.cchip{
  padding:5px 9px; margin:0 6px 6px 0; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg); color:var(--text-dim);
  font:inherit; font-size:12px; cursor:pointer; opacity:.5;
}
.cchip.is-on{ border-color:var(--accent); color:var(--text); opacity:1; }

.advcaveat{
  font-size:11.5px; line-height:1.5; color:var(--text-dim);
  padding:5px 0 5px 9px; border-left:2px solid var(--accent); margin:6px 0;
}

.tbl-wrap.adv{ max-height:min(70vh,560px); overflow:auto; }
table.advtbl{ font-size:12px; }
table.advtbl th{
  position:sticky; top:0; z-index:2; background:var(--surface);
  font-size:10px; letter-spacing:.04em; padding:7px 9px;
}
table.advtbl th.sortable{ cursor:pointer; user-select:none; }
table.advtbl th.is-sort{ color:var(--accent); }
table.advtbl td{ padding:5px 9px; line-height:1.35; }
/* the script name stays put while the rest scrolls */
table.advtbl td.tkr,table.advtbl th:first-child{
  position:sticky; left:0; z-index:1; background:var(--bg);
  box-shadow:1px 0 0 var(--line);
}
table.advtbl th:first-child{ z-index:3; background:var(--surface); }
table.advtbl td.tkr{ font-weight:600; cursor:pointer; color:var(--accent); }
table.advtbl td.dim,table.advtbl .dim{ color:var(--text-faint); }
table.advtbl .tag{
  display:inline-block; padding:1px 6px; border-radius:var(--r-sm);
  background:var(--surface-2); font-size:11px; line-height:1.5;
  white-space:nowrap; max-width:170px; overflow:hidden;
  text-overflow:ellipsis; vertical-align:middle;
}
table.advtbl td.up .tag{ color:var(--up); }
table.advtbl td.down .tag{ color:var(--down); }
table.advtbl td.up{ color:var(--up); }
table.advtbl td.down{ color:var(--down); }

.csvbox{
  width:100%; margin:0 0 12px; padding:9px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--text);
  font-family:var(--mono); font-size:11px;
}

@media (max-width:640px){
  .advbar{ grid-template-columns:1fr 1fr; }
  .advf.narrow{ max-width:none; }
  table.advtbl{ font-size:11.5px; }
  table.advtbl td,table.advtbl th{ padding:5px 7px; }
  table.advtbl .tag{ max-width:120px; }
}

/* the date column only appears when a run covers more than one bar */
table.advtbl td.dcell{ color:var(--text-dim); font-variant-numeric:tabular-nums; }
.advcolfoot{ margin-top:8px; padding-top:9px; border-top:1px solid var(--line); }
.advcolfoot button[disabled]{ opacity:.4; cursor:default; }

/* ==================================================== CHART WORKSPACE (28g)
   The chart page fits the screen at EVERY size: nothing scrolls the page,
   the chart takes the height that is left, indicator panels share it.
   What differs is what sits around the chart.
     phone     toolbar | chart | range bar, tabs at the bottom; the scrip's
               figures, conditions and watchlist open as a sheet from ⓘ
     desktop   drawing rail | chart | watchlist and figures, tabs in the
               header
   Body classes, set by applyLayout() in script.js:
     .desk        window 1024px or wider
     .chart-fit   the chart view is showing (any width)
     .sheet-open  the phone's details sheet is up                           */

/* ---- defaults (the chart view not showing, or no layout applied yet) ---- */
.cdesk { display: flex; flex-direction: column; gap: 14px; }
.cstage { position: relative; }
.toolrail { display: none; }
.cside { display: flex; flex-direction: column; gap: 14px; }
.cside .side-watch, .cside .side-scrip, .sheet-head { display: none; }
#infoBtn { display: none; }

.rangebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 13px 8px;
}
.rb-btns { display: flex; gap: 2px; flex-wrap: wrap; }
.rbtn {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-dim); font: 600 12px var(--sans);
  padding: 4px 8px; border-radius: var(--r-sm);
}
.rbtn:hover { background: var(--surface-2); color: var(--text); }
.rbtn.is-on { color: var(--accent); background: var(--accent-soft); }
.rangebar .tfnote { margin-left: auto; text-align: right; }

/* ---- desk: the tabs move up into the header (every view) ---- */
body.desk { padding-bottom: 0; }
body.desk .topbar .shell { max-width: none; padding-inline: 14px; }
body.desk .topbar-in { gap: 18px; padding-block: 6px; }
body.desk .headline { display: none; }            /* its line moved up too */
body.desk .topbar-in .hl { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
                           overflow: hidden; white-space: nowrap; }
body.desk .tabbar {
  position: static; display: flex; flex: none; gap: 2px;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
body.desk .tabbar .tab {
  flex-direction: row; gap: 6px; padding: 6px 11px;
  font-size: 13px; border-radius: var(--r-sm);
}
body.desk .tabbar .tab svg { width: 16px; height: 16px; }
body.desk .tabbar .tab.is-on { background: var(--accent-soft); }
body.desk .tabbar .tab.is-on::before { display: none; }
body.desk .tabbar .tab-n { position: static; margin-left: 0; }
body.desk main.shell { max-width: 1280px; }

/* ================= chart-fit, EVERY size: the page stops scrolling ====== */
body.chart-fit {
  margin: 0;                    /* the browser's default 8px would overflow */
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  padding-bottom: 0;
}
body.chart-fit .topbar { flex: none; position: relative; }
body.chart-fit main.shell {
  flex: 1 1 0; min-height: 0; max-width: none; padding: 0;
  display: flex; flex-direction: column;
  /* room for the tab bar, which is fixed to the bottom on a phone;
     applyLayout() measures it, and sets 0 on a desktop */
  margin-bottom: var(--tabH, 0px);
}
body.chart-fit #view-chart { flex: 1 1 0; min-height: 0; padding: 0; gap: 0; }
body.chart-fit .foot { display: none; }
body.chart-fit .cdesk { height: 100%; gap: 0; }

body.chart-fit .cmain {
  display: flex; flex-direction: column; flex: 1 1 0;
  min-width: 0; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
body.chart-fit .chartbar {
  flex: none; flex-wrap: nowrap; padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
}
body.chart-fit .chartbar input { flex: 0 1 220px; min-width: 70px; }
body.chart-fit .replaybar:empty { display: none; }
body.chart-fit .cstage { flex: 1 1 0; min-height: 0; overflow: hidden; }
body.chart-fit .chart-box { position: absolute; inset: 0; padding: 0; }

/* name, price and the OHLC readout sit ON the chart, top-left, the way a
   terminal's legend does - they cost no height. They let touches through
   to the chart, except their own buttons. */
body.chart-fit .cover {
  position: absolute; left: 10px; top: 6px; right: 70px; z-index: 2;
  pointer-events: none;
}
body.chart-fit .cover button { pointer-events: auto; }
body.chart-fit .chart-head,
body.chart-fit .chart-readout { padding: 0; }
body.chart-fit .chart-head > *,
body.chart-fit .chart-readout .ro {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-radius: 3px;
}
body.chart-fit .chart-head .px { font-size: 17px; }

body.chart-fit .rangebar {
  flex: none; padding: 4px 10px; border-top: 1px solid var(--line-soft);
}
body.chart-fit .legend {
  flex: none; padding: 0 12px 5px; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ================= desktop only: rail | chart | side column ============ */
body.desk.chart-fit .cdesk {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) var(--sideW, 320px) 44px;
}
body.desk.chart-fit.side-closed .cdesk { grid-template-columns: 46px minmax(0, 1fr) 0 44px; }
body.desk.chart-fit.side-closed .cside { display: none; }
body.desk.chart-fit .toolrail {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
}
body.desk.chart-fit #toolBtn { display: none; }    /* the rail replaces it */
body.desk.chart-fit .cside {
  display: block; min-height: 0; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
}
body.desk.chart-fit .cside .side-watch,
body.desk.chart-fit .cside .side-scrip { display: block; }
body.desk.chart-fit #chartConditions .card {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
@media (max-width: 1279px) {
  body.desk.chart-fit .cdesk { grid-template-columns: 46px minmax(0, 1fr) var(--sideW, 290px) 44px; }
  body.desk.chart-fit.side-closed .cdesk { grid-template-columns: 46px minmax(0, 1fr) 0 44px; }
}

.rtool {
  width: 34px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer;
}
.rtool:hover { background: var(--surface-2); color: var(--text); }
.rtool.is-on { background: var(--accent-soft); color: var(--accent); }
.rsep { width: 22px; height: 1px; background: var(--line); margin: 6px 0; flex: none; }

/* ================= phone only: the chart and a details sheet =========== */
body.chart-fit:not(.desk) #infoBtn { display: inline-flex; }
body.chart-fit:not(.desk) .chartbar { gap: 6px; padding: 6px 8px; }
body.chart-fit:not(.desk) .chart-head .sub,
body.chart-fit:not(.desk) .chart-head .formtag { display: none; }
body.chart-fit:not(.desk) .chart-head .px { font-size: 15px; }
body.chart-fit:not(.desk) .cover { left: 6px; top: 4px; right: 62px; }
body.chart-fit:not(.desk) .rangebar {
  flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 3px 6px;
  scrollbar-width: none;
}
body.chart-fit:not(.desk) .rangebar::-webkit-scrollbar { display: none; }
body.chart-fit:not(.desk) .rb-btns { flex-wrap: nowrap; }
body.chart-fit:not(.desk) .rbtn { padding: 5px 7px; }
body.chart-fit:not(.desk) .rangebar .tfnote { display: none; }
body.chart-fit:not(.desk) .rangebar .rbtn.auto { margin-left: auto; }
body.chart-fit:not(.desk) .legend { display: none; }

/* The sheet: the scrip's figures, its conditions and the watchlist, up
   from the bottom over the chart, above the tab bar. It scrolls inside
   itself; the chart behind it does not move. */
body.chart-fit:not(.desk) .cside {
  position: fixed; left: 0; right: 0; z-index: 70;
  bottom: var(--tabH, 0px);
  max-height: 72vh; max-height: 72dvh;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  transform: translateY(calc(100% + var(--tabH, 0px) + 20px));
  transition: transform .22s ease;
  visibility: hidden;
}
body.chart-fit.sheet-open:not(.desk) .cside {
  transform: none; visibility: visible;
}
body.chart-fit:not(.desk) .cside .side-scrip { display: block; order: 2; }
body.chart-fit:not(.desk) .cside #chartConditions { order: 3; }
body.chart-fit:not(.desk) .cside .side-watch { display: block; order: 4; }
body.chart-fit:not(.desk) .cside .sheet-head {
  display: flex; order: 1; position: sticky; top: 0; z-index: 1;
  align-items: center; justify-content: space-between;
  padding: 10px 14px 8px; background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600; font-size: 14px;
}
.sheet-head::before {
  content: ""; position: absolute; top: 4px; left: 50%;
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line); transform: translateX(-50%);
}
.sheet-head button {
  border: 0; background: transparent; color: var(--text-dim);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
body.chart-fit:not(.desk) #chartConditions .card {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
body.chart-fit:not(.desk) .sw-list { max-height: none; }

/* ---- the watchlist and figures panels themselves ---- */
.sw-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
}
.sw-head b { font-size: 13px; }
.sw-n { font: 11px var(--mono); color: var(--text-faint); }
.sw-head input {
  margin-left: auto; width: 96px; padding: 4px 7px; font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); text-transform: uppercase;
}
.sw-cols, .sw-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 56px 60px;
  gap: 4px; padding: 5px 12px;
}
.sw-cols {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint);
}
.sw-cols span:not(:first-child), .sw-v { text-align: right; }
.sw-list { max-height: 40vh; overflow-y: auto; border-bottom: 1px solid var(--line); }
.sw-row {
  width: 100%; border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--text); cursor: pointer;
  font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: left;
}
.sw-row:hover { background: var(--surface-2); }
.sw-row.is-on { background: var(--accent-soft); border-left-color: var(--accent); }
.sw-t { font-family: var(--sans); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sw-v.up { color: var(--up); }
.sw-v.down { color: var(--down); }
.sw-empty { padding: 12px; font-size: 12px; color: var(--text-dim); }

.side-scrip { padding: 12px 12px 14px; }
.ss-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.ss-sec { font-size: 11.5px; color: var(--text-dim); }
.ss-px { margin-top: 6px; }
.ss-px b { font: 600 26px var(--mono); font-variant-numeric: tabular-nums; }
.ss-px span { font: 13px var(--mono); margin-left: 8px; }
.ss-px span.up { color: var(--up); }
.ss-px span.down { color: var(--down); }
.ss-when { font-size: 11px; color: var(--text-faint); }
.ss-h {
  margin: 14px 0 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
}
.ks {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: 12.5px; border-bottom: 1px solid var(--line-soft);
}
.ks span { color: var(--text-dim); }
.ks b { font: 500 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.ss-none { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); }

/* the auto-scale switch: lit while the price scale fits the visible bars */
.rbtn.auto {
  min-width: 26px; font-family: var(--mono);
  border: 1px solid var(--line);
}
.rangebar .tfnote + .rbtn.auto { margin-left: 8px; }

/* ============================================= toolbar additions (28h) */
/* drawn icons inside the rail and the tool pop-up */
.rtool .ic, .indopt .ic, #toolIcon .ic { width: 18px; height: 18px; display: block; }
.indopt .ti .ic { display: inline-block; vertical-align: -4px; }
.rtool.rauto { font: 700 13px var(--mono); }

/* the price-scale switch floating over the chart, phone only; on a
   desktop it lives in the left rail */
.cauto {
  position: absolute; right: 64px; top: 8px; z-index: 3;   /* placed by drawChart */
  width: 28px; height: 26px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-dim); font: 700 12px var(--mono); cursor: pointer;
  opacity: .9;
}
.cauto.is-on { color: var(--accent); background: var(--accent-soft); }
body.desk .cauto { display: none; }
body:not(.chart-fit) .cauto { display: none; }

/* ranges and notes inside the timeframe pop-up */
.indopts.ranges { display: flex; flex-wrap: wrap; gap: 4px; }
.indopts.ranges .indopt { min-width: 42px; justify-content: center; }
.tfpop-note {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft);
  font-size: 11px; line-height: 1.45; color: var(--text-faint); max-width: 300px;
}

/* ---- chart type button (28i) ---- */
#ctypeIcon .ic { width: 18px; height: 18px; display: block; }
#ctypeBtn { gap: 2px; }
#indBtn .short-lbl { display: none; font-style: italic; font-weight: 600; }
/* a phone's toolbar has one more button now; the word shortens to ƒx */
body.chart-fit:not(.desk) #indBtn .long-lbl { display: none; }
body.chart-fit:not(.desk) #indBtn .short-lbl { display: inline; }
body.chart-fit:not(.desk) .chart-head .formtag.ha { display: inline-block; }
.formtag.ha { color: var(--accent); }

/* ============================================= multi-chart (28j) =========
   The stage is a grid of windows. One window fills it on a phone and in
   the one-chart layout; the others appear on a desktop when a layout asks
   for them. Thin lines between windows; the active one is outlined.      */
.cstage { display: grid; grid-template: 1fr / 1fr; gap: 0; }
.cpane { position: relative; min-width: 0; min-height: 0; overflow: hidden;
         background: var(--bg); }
.cpane[hidden] { display: none; }
body.chart-fit .cpane .chart-box { position: absolute; inset: 0; padding: 0; }

/* several windows: each is placed by placeLayout(); the stage colour shows
   through the 4px between them, a clear contrast line in both themes */
.cstage.multi { display: block; position: relative;
  background: color-mix(in srgb, var(--text) 38%, var(--bg)); }
.cstage.multi > .cpane { position: absolute; }
.lay-split { position: absolute; z-index: 6; background: transparent; touch-action: none; }
.lay-split.v { width: 4px; cursor: col-resize; }
.lay-split.h { height: 4px; cursor: row-resize; }
.lay-split:hover, .lay-split.drag { background: var(--accent); }
/* the layout list scrolls when the window is short */
.laylist { max-height: min(56vh, 520px); overflow-y: auto; }
.indpop:has(.laylist) { max-width: min(400px, calc(100vw - 16px)); width: 400px; }
/* the layout pictures are the point of this list: big enough to read at a glance */
.laylist .indopt { gap: 12px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }
/* the layout pictures: a thin blue outline with its dividers, a little bigger than TradingView's */
.laylist .indopt .ti { width: 44px; height: 33px; flex: none; display: grid; place-items: center; color: #3F74F5; }
.laylist .indopt .ti svg.lay-big { width: 44px; height: 33px; }
.laylist .indopt.is-on .ti { color: var(--accent); }
.laylist .indopt.is-on .ti svg.lay-big rect { fill: currentColor; fill-opacity: .1; }

.cpane.is-active::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* in a small window the name and price shrink so the candles show */
.cstage.multi .chart-head .px { font-size: 14px; }
.cstage.multi .chart-head .sub { display: none; }

#layoutIcon .ic { width: 18px; height: 18px; display: block; }
#layoutBtn { display: none; }
body.desk.chart-fit #layoutBtn { display: inline-flex; }

/* ================================= technicals & fundamentals (29a) ======
   Desktop: a drawer over the right of the chart. Phone: tabs in the ⓘ
   sheet. The contents are the same markup either way.                    */
.cwork { position: relative; display: flex; flex-direction: column; }
body.chart-fit .cwork { flex: 1 1 0; min-height: 0; }
body.chart-fit .cwork > .cstage { flex: 1 1 0; min-height: 0; }

.cb-gap { flex: 1 1 auto; }
.infobtn { font-weight: 600; }
.infobtn.armed { color: var(--accent); background: var(--accent-soft);
                 border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
body.chart-fit:not(.desk) .infobtn, body.chart-fit:not(.desk) .cb-gap { display: none; }
body:not(.chart-fit) .infobtn { display: none; }

.idrawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
  width: min(820px, 94%);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -12px 0 30px rgba(0, 0, 0, .16);
}
.idrawer[hidden] { display: none; }
.idr-head {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
}
.idr-head b { font-size: 15px; }
.idr-close {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--text-dim); font-size: 18px; padding: 2px 6px;
}
.idr-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 18px; }

/* the phone sheet's tabs */
.sheet-tabs { display: none; }
body.chart-fit:not(.desk) .cside .sheet-tabs {
  display: flex; order: 1; margin: 8px 12px 4px; position: sticky; top: 44px; z-index: 1;
}
body.chart-fit:not(.desk) .cside .sheet-tabs button { flex: 1; }
body.chart-fit:not(.desk) .cside .sheet-info { order: 2; padding: 6px 12px 14px; }
.sheet-info[hidden] { display: none; }
.st-hide { display: none !important; }

/* timeframe chips */
.tfchips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tfchip {
  border: 1px solid var(--line); background: var(--bg); color: var(--text-dim);
  font: 600 11.5px var(--mono); padding: 4px 9px; border-radius: 999px; cursor: pointer;
}
.tfchip.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* gauges */
.gauges {
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px 12px;
  align-items: end; margin-bottom: 12px;
}
.gblock { text-align: center; min-width: 0; }
.gblock .gtitle { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.gblock.big .gtitle { font-size: 15px; }
svg.gauge { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.glabel { font-weight: 700; font-size: 16px; margin-top: 2px; }
.gblock.big .glabel { font-size: 20px; }
.gcounts { display: flex; justify-content: center; gap: 12px; font-size: 11.5px;
           color: var(--text-dim); margin-top: 3px; }
.gcounts .up b { color: var(--up); } .gcounts .down b { color: var(--down); }
.gsince { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.45; }
.gsince .dim, .dim { color: var(--text-faint); }

/* how long - the summary, bar by bar */
.histstrip { margin: 4px 0 16px; }
.hs-h { font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
        text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.hs-cells { display: flex; gap: 1px; height: 14px; }
.hs-cells .hc { flex: 1 1 0; border-radius: 1px; }
.hs-ends { display: flex; justify-content: space-between; font: 10.5px var(--mono);
           color: var(--text-faint); margin-top: 3px; }

/* the tables */
.ttable { margin-top: 14px; }
.tt-h { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 14px;
        margin-bottom: 4px; }
.tt-sum { font-size: 12.5px; }
.tt-note { font-weight: 400; font-size: 11.5px; color: var(--text-faint); }
table.tbl.tech { font-size: 12px; }
table.tbl.tech td, table.tbl.tech th { padding: 5px 8px; }
table.tbl.tech td.nm { font-family: var(--sans); text-align: left; }
table.tbl.tech td.cond { text-align: left; color: var(--text-dim); font-family: var(--sans);
                         white-space: normal; }
table.tbl.tech th:nth-child(3), table.tbl.tech th:nth-child(4) { text-align: left; }
table.tbl.tech td.rd { text-align: left; font-weight: 600; }
table.tbl.tech td.rd.up { color: var(--up); }
table.tbl.tech td.rd.down { color: var(--down); }
table.tbl.tech td.rd.neu { color: var(--text-faint); }
table.tbl.piv tr.pp td { font-weight: 700; }
table.tbl.piv tr.rr td.nm { color: var(--up); }
table.tbl.piv tr.ss td.nm { color: var(--down); }
.pivwrap { max-height: none; }

/* fundamentals */
.fhead { margin-bottom: 8px; }
.fname { font-weight: 700; font-size: 16px; }
.fsub { font-size: 12px; color: var(--text-dim); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.fcol { min-width: 0; }
.holdbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 6px 0 6px; }
.holdbar i { display: block; height: 100%; }
.holdrows .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
                 margin-right: 7px; vertical-align: 0; }
.holdrows em { font-style: normal; font-size: 11px; margin-left: 4px; }
.holdrows em.up { color: var(--up); } .holdrows em.down { color: var(--down); }

/* the phone: one gauge big across the top, the other two side by side */
body.chart-fit:not(.desk) .gauges { grid-template-columns: 1fr 1fr; }
body.chart-fit:not(.desk) .gblock.big { grid-column: 1 / -1; order: -1; }
body.chart-fit:not(.desk) .fgrid { grid-template-columns: 1fr; }
body.chart-fit:not(.desk) table.tbl.tech td.cond { font-size: 11px; }

/* 29c: fundamentals read on demand */
.fstatus { font-size: 12px; color: var(--text-faint); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.fstatus .warn { color: var(--down); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent, #a86b00); text-decoration: underline; cursor: pointer; font: inherit; }
.linkbtn:disabled { opacity: .6; cursor: default; }

/* ==========================================================================
   29d: compact market summary, sector map, Market tab
   ========================================================================== */
#view-board > .card:first-child .card-head { justify-content: center; text-align: center; padding: 8px 10px 6px; }
#view-board > .card:first-child .card-head .card-title { font-size: 14px; }
#view-board > .card:first-child .card-head .card-sub { margin-top: 0; }
.sumcell { padding: 7px 8px; text-align: center; }
.sum-k { font-size: 9.5px; }
.sum-v { font-size: 17px; margin-top: 2px; line-height: 1.2; }
.sum-v .unit { font-size: 11px; }
.sum-c { font-size: 11.5px; margin-top: 0; }
.sum-s { font-size: 10px; margin-top: 1px; }
.sum-breadth { justify-content: center; }
.sumnote:empty { display: none; }
@media (min-width: 1024px) {
  .sumgrid { grid-template-columns: repeat(6, 1fr); }
  .sumcell { border-bottom: 0 !important; border-right: 1px solid var(--line-soft) !important; }
  .sumcell:last-child { border-right: 0 !important; }
}
@media (max-width: 620px) {
  .sumgrid { grid-template-columns: repeat(3, 1fr); }
  .sumcell { padding: 6px 4px; }
  .sumcell:nth-child(2n) { border-right: 1px solid var(--line-soft); }
  .sumcell:nth-child(3n) { border-right: 0; }
  .sumgrid > .sumcell:nth-last-child(-n+3) { border-bottom: 0; }
  .sumgrid > .sumcell:nth-last-child(-n+2) { border-bottom: 0; }
  .sumgrid > .sumcell:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .sum-v { font-size: 14px; }
  .sum-v .unit { display: none; }
  .sum-s { font-size: 9.5px; }
}

/* sector map */
.maphead { align-items: center; }
.maptools { display: flex; gap: 6px; align-items: center; }
#mapFull { border: 1px solid var(--line); background: var(--surface); color: var(--text-dim);
  border-radius: var(--r-sm); height: 28px; width: 32px; cursor: pointer; font-size: 15px; }
#mapFull:hover { color: var(--text); background: var(--surface-2); }
.maplegend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  padding: 6px 13px 8px; font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
.maplegend .lg { display: inline-flex; align-items: center; gap: 4px; }
.maplegend .lg i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.maplegend .lg-sum { margin-left: auto; color: var(--text-dim); }
.maplegend .lg-sum b.up { color: var(--up); } .maplegend .lg-sum b.down { color: var(--down); }

.secmap {
  --rh: 18px;
  column-width: 180px; column-gap: 4px; column-fill: balance;
  padding: 0 6px 6px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--line-soft); padding-top: 6px;
}
.secmap.fit { column-fill: auto; overflow-x: auto; overflow-y: hidden; }
.sm-h { break-inside: avoid; break-after: avoid; background: var(--text); color: var(--surface);
  border-radius: 3px 3px 0 0; padding: 2px 5px; margin-top: 3px; line-height: 1.25; }
.sm-h:first-child { margin-top: 0; }
.sm-h1 { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.sm-h1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.sm-h1 span.up { color: #4ade80; } .sm-h1 span.down { color: #f87171; } .sm-h1 span.flat { opacity: .75; }
.sm-h2 { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; opacity: .8; }
.sm-h2 i { font-style: normal; } .sm-h2 i.up { color: #4ade80; } .sm-h2 i.down { color: #f87171; }
.sm-r { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto 36px 30px; gap: 4px;
  align-items: center; height: var(--rh); font-size: min(11.5px, calc(var(--rh) - 3px));
  padding: 0 4px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.06); color: #14181f; }
.sm-r b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-r span { text-align: right; white-space: nowrap; }
.sm-r span:last-child { opacity: .7; }
.sm-r:hover { outline: 1.5px solid var(--text); outline-offset: -1.5px; }
.sm-r.nt { opacity: .55; }
/* tints: fixed light tiles in both themes, like a printed board */
.sm-r.t0, .maplegend i.t0 { background: #cfe3f7; }
.sm-r.na { background: #e5e7eb; }
.sm-r.u1, .maplegend i.u1 { background: #d6f5dc; }
.sm-r.u2, .maplegend i.u2 { background: #aeebb9; }
.sm-r.u3, .maplegend i.u3 { background: #7fdc92; }
.sm-r.u4, .maplegend i.u4 { background: #45c463; }
.sm-r.d1, .maplegend i.d1 { background: #fbe0e0; }
.sm-r.d2, .maplegend i.d2 { background: #f7bcbc; }
.sm-r.d3, .maplegend i.d3 { background: #f09595; }
.sm-r.d4, .maplegend i.d4 { background: #e36666; }
#mapCard:fullscreen { overflow: auto; background: var(--bg, var(--surface)); padding: 4px; border-radius: 0; }
#mapCard:fullscreen .secmap { background: var(--surface); }
@media (max-width: 620px) {
  .secmap { column-width: 175px; }
  .maplegend .lg-sum { margin-left: 0; width: 100%; }
}
/* on a desktop the map uses the full width of the window, not the column */
@media (min-width: 1024px) {
  #mapCard { width: calc(100vw - 28px); margin-left: calc(50% - 50vw + 14px); }
}
#mapCard { scroll-margin-top: 90px; }
.sm-r b { font-family: var(--sans, system-ui, sans-serif); letter-spacing: -.02em; text-overflow: clip; }
.secmap.novol .sm-r { grid-template-columns: minmax(0, 1fr) auto 38px; }
.secmap.novol .sm-r span:last-child { display: none; }
@media (max-width: 620px) {
  .secmap .sm-r { grid-template-columns: minmax(0, 1fr) auto 38px; }
  .secmap .sm-r span:last-child { display: none; }
}
.sm-h { padding: 1px 4px; margin-top: 2px; line-height: 1.12; }
.sm-h1 { font-size: 10.5px; } .sm-h2 { font-size: 9px; }
@media (max-width: 620px) {
  .secmap { column-width: auto; column-count: 2; column-gap: 3px; padding: 4px 3px 4px; }
  .secmap .sm-r { font-size: 10.5px; height: 17px; padding: 0 3px; gap: 3px; grid-template-columns: minmax(0, 1fr) auto 34px; }
  .sm-h1 { font-size: 10px; } .sm-h2 { font-size: 8.5px; }
  .maplegend { font-size: 9.5px; gap: 3px 8px; }
  .maphead .seg button { padding-inline: 8px; }
}
@media (max-width: 620px) { .sum-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* 29e: tall, clear rows on the page; fitted only in full screen */
@media (min-width: 621px) {
  .secmap:not(.fit) { --rh: 26px; column-width: 215px; column-fill: balance; column-gap: 5px; }
  .secmap:not(.fit) .sm-r { font-size: 12.5px; grid-template-columns: minmax(0, 1fr) auto 44px 40px; gap: 6px; padding: 0 6px; }
  .secmap:not(.fit) .sm-h { padding: 3px 6px; margin-top: 4px; }
  .secmap:not(.fit) .sm-h1 { font-size: 12.5px; }
  .secmap:not(.fit) .sm-h2 { font-size: 10.5px; }
}
@media (max-width: 620px) {
  .secmap .sm-r { height: 26px; font-size: 12px; }
  .sm-h1 { font-size: 11.5px; } .sm-h2 { font-size: 9.5px; }
}

/* 29f: one screen tall on a desktop, full-height rows, scrolls sideways */
.secmap.fit { --rh: 26px; column-width: 215px; column-fill: auto; column-gap: 5px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.secmap.fit .sm-r { font-size: 12.5px; grid-template-columns: minmax(0, 1fr) auto 44px 40px; gap: 6px; padding: 0 6px; }
.secmap.fit .sm-h { padding: 3px 6px; margin-top: 4px; }
.secmap.fit .sm-h1 { font-size: 12.5px; }
.secmap.fit .sm-h2 { font-size: 10.5px; }
.secmap.fit .sm-r span:last-child { display: block; }

/* ==========================================================================
   29h: Ask answers in words
   ========================================================================== */
.report { overflow: visible; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 16px 18px 10px; flex-wrap: wrap; }
.rp-t { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.rp-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.rp-px { text-align: right; }
.rp-ltp { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1.1; }
.rp-chg { font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
.rp-date { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.rp-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; align-items: center; }
.rp-gauge { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; }
.rp-gauge i { font-style: normal; color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.rp-gauge b { font-weight: 700; }
.rp-gauge.up b { color: var(--up); } .rp-gauge.down b { color: var(--down); }
.rp-gauge span { color: var(--text-dim); font-size: 11.5px; }
.rp-perf { display: inline-flex; gap: 4px; align-items: baseline; font-family: var(--mono); font-size: 11.5px;
  padding: 4px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.rp-perf i { font-style: normal; color: var(--text-faint); }
.rp-perf.up { color: var(--up); } .rp-perf.down { color: var(--down); }
.rp-hl { margin: 0 18px 10px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.rp-hl::first-letter { text-transform: uppercase; }
.rp-warn { margin: 0 18px 12px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.rp-points { margin: 0 18px 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border-left: 3px solid var(--accent); }
.rp-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.rp-points ul { margin: 0; padding-left: 18px; }
.rp-points li { margin: 3px 0; font-size: 14px; line-height: 1.45; }
.rp-nav { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; position: sticky; top: 0; }
.rp-nav button { border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.rp-nav button:hover { color: var(--text); border-color: var(--accent); }
.rp-sec { border-top: 1px solid var(--line-soft); padding: 14px 18px 12px; scroll-margin-top: 110px; }
.rp-sec h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rp-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rp-text p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.rp-facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.rp-facts > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.rp-facts > div:last-child { border-bottom: 0; }
.rp-facts > div:nth-child(odd) { background: var(--surface-2); }
.rp-facts dt { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.rp-facts dd { margin: 0; font-family: var(--mono); font-size: 12px; text-align: right; }
.rp-facts dd.up { color: var(--up); } .rp-facts dd.down { color: var(--down); }
.rp-foot { border-top: 1px solid var(--line-soft); padding: 12px 18px 4px; }
.rp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-actions button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: var(--r-sm);
  padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rp-actions button:hover { border-color: var(--accent); }
.rp-follow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.rp-follow > span { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
@media (max-width: 760px) {
  .rp-body { grid-template-columns: 1fr; gap: 10px; }
  .rp-head { padding: 14px 14px 8px; }
  .rp-t, .rp-ltp { font-size: 22px; }
  .rp-strip, .rp-nav { padding-inline: 14px; }
  .rp-hl, .rp-warn, .rp-points { margin-inline: 14px; }
  .rp-sec, .rp-foot { padding-inline: 14px; }
  .rp-text p { font-size: 14px; }
}

/* 29i: Market board - the script column takes only what it needs, so the
   figures sit next to it instead of across the page */
#boardTable { width: 100%; }
#boardTable th.bt-scrip, #boardTable td.bt-scrip { width: 1%; white-space: nowrap; padding-right: 22px; }
#boardTable td.b { font-weight: 600; }
#boardTable th, #boardTable td { white-space: nowrap; }

/* 29j: phone - tight columns, the script stays in view while the row scrolls */
@media (max-width: 760px) {
  #boardTable { width: auto; min-width: 100%; font-size: 11.5px; }
  /* Safari reads a percentage width inside a scrolling table as a share of
     the whole wide table - which is what made the script column huge on the
     iPhone. On a phone the column simply fits its text. */
  #boardTable th.bt-scrip, #boardTable td.bt-scrip { width: auto !important; }
  #boardTable th, #boardTable td { padding: 7px 7px; }
  #boardTable th.bt-scrip, #boardTable td.bt-scrip {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    padding-left: 8px; padding-right: 8px; box-shadow: 1px 0 0 var(--line-soft); }
  #boardTable thead th.bt-scrip { z-index: 3; }
  #boardTable .heart { margin-right: 2px; }
  #boardTable .mini { padding: 1px 4px; font-size: 10px; }
}

/* 29m: watchlist - the +/- amount on phones too; the technical table */
@media (max-width: 620px) {
  .wrow { grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; }
  .w-chg { display: block; font-size: 13px; }
  .w-right { min-width: 76px; }
}
table.wtech { font-size: 12px; }
table.wtech th, table.wtech td { padding: 6px 8px; white-space: nowrap; }
table.wtech tr.grp th { font-size: 9.5px; text-align: center; color: var(--text-faint); border-bottom: 0; padding-bottom: 0; }
table.wtech tr.grp th.g-osc, table.wtech tr.grp th.g-ma { border-bottom: 2px solid var(--line); }
table.wtech td.b { font-weight: 600; }
table.wtech td.rd.up { color: var(--up); }
table.wtech td.rd.down { color: var(--down); }
table.wtech td.rd.neu { color: var(--text-faint); }
table.wtech td.gcell { text-align: left; }
table.wtech .gl { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 11.5px;
  padding: 1px 7px; border-radius: 4px; }
table.wtech .gl.up { color: #fff; background: var(--up); }
table.wtech .gl.down { color: #fff; background: var(--down); }
table.wtech .gl.neu { color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
table.wtech .gs { display: block; font-style: normal; font-size: 10px; color: var(--text-faint); margin-top: 2px; }
table.wtech th.wt-scrip, table.wtech td.wt-scrip { position: sticky; left: 0; background: var(--surface);
  z-index: 1; box-shadow: 1px 0 0 var(--line-soft); text-align: left; }
table.wtech thead th.wt-scrip { z-index: 3; }
table.wtech tbody tr:hover td.wt-scrip { background: var(--surface-2); }
table.wtech th.gh { text-align: left; }

/* ==========================================================================
   29o: accounts - login gate, user menu, admin approvals
   ========================================================================== */
body.auth-locked > *:not(#authGate) { filter: blur(3px); pointer-events: none; user-select: none; }
#authGate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg, #0b0f14) 55%, transparent); }
.auth-card { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.auth-brand b { font-weight: 800; letter-spacing: .01em; }
.auth-tag { font-size: 12px; color: var(--text-faint); margin: 2px 0 16px 28px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.auth-tabs button { border: 0; background: var(--surface); padding: 9px; font: inherit; font-size: 13.5px;
  color: var(--text-dim); cursor: pointer; }
.auth-tabs button.is-on { background: var(--surface-2); color: var(--text); font-weight: 700; }
#authGate form, .tsm-form { display: grid; gap: 10px; }
#authGate label, .tsm-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-dim); }
#authGate input, .tsm-form input { font: inherit; font-size: 15px; padding: 10px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
#authGate input:focus, .tsm-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.auth-go { margin-top: 4px; padding: 11px; border: 0; border-radius: 8px; background: var(--accent);
  color: var(--accent-ink, #191104); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.auth-small { font-size: 11.5px; color: var(--text-faint); }
.auth-msg { min-height: 18px; margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.auth-msg.bad { color: var(--down); } .auth-msg.good { color: var(--up); }
.auth-warn { margin-top: 10px; font-size: 11.5px; color: var(--down); }

.userbtn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 12px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px 3px 3px;
  font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; position: relative; }
.ub-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink, #191104); font-weight: 800; font-size: 12px; }
.ub-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--down); color: #fff; font-style: normal; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px; }
@media (max-width: 620px) { .ub-n { display: none; } .userbtn { padding: 2px; margin-right: 8px; } }
.usermenu { position: fixed; z-index: 900; min-width: 220px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.18); padding: 6px; display: grid; }
.usermenu .um-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; display: grid; gap: 2px; }
.usermenu .um-who span { font-size: 11.5px; color: var(--text-faint); }
.usermenu button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 6px;
  font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.usermenu button:hover { background: var(--surface-2); }

#tsModal { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px;
  background: rgba(0,0,0,.35); }
.tsm-card { width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tsm-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tsm-x { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--text-dim); }
.tsm-body { padding: 14px 16px; overflow: auto; }
.tsm-body h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.tsm-body h4 i { font-style: normal; background: var(--surface-2); border-radius: 8px; padding: 0 6px; }
.uadm { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 6px; }
.uadm.pending { border-left: 3px solid var(--accent); }
.uadm.disabled { opacity: .7; }
.ua-who span { color: var(--text-faint); font-size: 12.5px; }
.ua-who em { font-style: normal; font-size: 10.5px; background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.ua-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.ua-act { display: flex; gap: 6px; flex-wrap: wrap; }
.ua-act button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px;
  padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ua-act button.warn { color: var(--down); }

/* ==========================================================================
   29p: AFL formulas - panel, editor, settings
   ========================================================================== */
.fxpanel { position: fixed; z-index: 700; top: 64px; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column; }
.fx-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fx-head b { font-size: 15px; }
.fx-sub { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.fx-x { margin-left: auto; border: 0; background: none; font-size: 22px; color: var(--text-dim); cursor: pointer; }
.fx-body { flex: 1; overflow: auto; padding: 12px 14px 20px; }
.fx-sec { margin-bottom: 16px; }
.fx-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin: 4px 0 8px; }
.fx-cap i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.fx-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 6px; }
.fx-row .fx-nm { flex: 1; min-width: 0; display: grid; }
.fx-row .fx-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-row .fx-nm span { font-size: 11.5px; color: var(--text-faint); }
.fx-row .fx-nm em.bad { color: var(--down); font-style: normal; }
.fx-row button, .fx-btns button, .fx-edbar button, .fx-gbtn { border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.fx-row button.warn { color: var(--down); }
.fx-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.fx-btns .fx-go, .fx-go { background: var(--accent); color: var(--accent-ink, #191104); border-color: var(--accent); font-weight: 700; }
.fx-hint { font-size: 11px; color: var(--text-faint); }
.fx-empty { font-size: 13px; color: var(--text-faint); padding: 8px 2px; }
.fx-note { font-size: 11.5px; color: var(--text-faint); border-top: 1px solid var(--line-soft); padding-top: 10px; }
.fx-ed { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.fx-edbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-edbar input, .fx-edbar select { font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); color: var(--text); }
.fx-edbar input { flex: 1; min-width: 140px; }
.fx-title { flex: 1; }
.fx-code { position: relative; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; min-height: 320px; flex: 1;
  background: var(--surface-2); }
.fx-gut { margin: 0; padding: 10px 6px 10px 8px; min-width: 36px; text-align: right; color: var(--text-faint); background: var(--surface);
  border-right: 1px solid var(--line-soft); font: 12.5px/17px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; user-select: none; }
.fx-msg { font-size: 12.5px; min-height: 18px; }
.fx-msg.bad { color: var(--down); } .fx-msg.good { color: var(--up); } .fx-msg.warn { color: var(--text-dim); }
.fx-msg ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-dim); }
.fx-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.fx-p.num { grid-template-columns: minmax(0, 1fr) 140px 80px; }
.fx-p input[type=number], .fx-p input[type=text], .fx-p select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); color: var(--text); width: 100%; }
.fx-p input[type=text] { width: 180px; }
.fx-p .gv { font-family: var(--mono); font-size: 12px; }
.fx-gbtn { margin: 4px 6px 4px 0; }
@media (max-width: 760px) {
  .fxpanel { top: 0; width: 100vw; border-left: 0; z-index: 900; }
  .fx-p.num { grid-template-columns: minmax(0, 1fr) 90px 64px; }
}
#fxBtn .short-lbl, #btBtn .short-lbl { display: none; font-weight: 700; }
body.chart-fit:not(.desk) #fxBtn .long-lbl, body.chart-fit:not(.desk) #btBtn .long-lbl { display: none; }
body.chart-fit:not(.desk) #fxBtn .short-lbl, body.chart-fit:not(.desk) #btBtn .short-lbl { display: inline; }

/* ==========================================================================
   29q: AFL Explore - a formula over every scrip
   ========================================================================== */
.fxx { position: fixed; z-index: 960; inset: 0; background: var(--surface); display: flex; flex-direction: column;
  border-top: 1px solid var(--line); }
.fxx[hidden] { display: none; }
.fxx-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.fxx-head b { font-size: 15px; }
.fxx-sub { font-size: 12px; color: var(--text-faint); }
.fxx-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.fxx-bar label { display: grid; gap: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.fxx-bar select, .fxx-bar input { font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text); max-width: 280px; }
.fxx-bar input[type=number] { width: 70px; }
.fxx-bar button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px;
  padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.fxx-bar button:disabled { opacity: .45; cursor: default; }
.fxx-bar button.stop { background: var(--down); border-color: var(--down); color: #fff; }
.fxx-status { padding: 8px 16px; font-size: 12.5px; color: var(--text-dim); border-bottom: 1px solid var(--line-soft); }
.fxx-status .bad { color: var(--down); }
.fxx-notes { margin-top: 6px; display: grid; gap: 4px; }
.fxx-notes details div { padding: 2px 0 2px 14px; font-size: 12px; }
.fxx-notes summary { cursor: pointer; }
.fxx-out { flex: 1; overflow: auto; }
.fxx-t { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.fxx-t th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; padding: 7px 10px; font-size: 11.5px;
  border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; }
.fxx-t td { padding: 5px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.fxx-t .r { text-align: right; font-family: var(--mono); }
.fxx-t td.tk { font-weight: 700; position: sticky; left: 0; background: var(--surface); }
.fxx-t th:first-child { left: 0; z-index: 2; }
.fxx-t td.dt { font-family: var(--mono); color: var(--text-dim); }
.fxx-t td.dt i { font-style: normal; font-size: 10px; background: var(--accent-soft); border-radius: 4px; padding: 0 4px; }
.fxx-t tbody tr { cursor: pointer; }
.fxx-t tbody tr:hover td { filter: brightness(.96); }
@media (max-width: 640px) {
  .fxx-bar { padding: 8px 12px; }
  .fxx-bar select { max-width: 100%; }
  .fxx-bar label:first-child { flex: 1 1 100%; }
  .fxx-bar label:first-child select { width: 100%; max-width: none; }
}

/* ==========================================================================
   29t: chart sheets - eight per chart window, tabs along its bottom
   ========================================================================== */
.cpane.has-sheets { --shH: 24px; }
body.chart-fit .cpane.has-sheets .chart-box { bottom: var(--shH); }
.cpane > .sheetbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--shH); z-index: 3;
  display: flex; align-items: stretch; gap: 1px; padding: 0 4px; overflow-x: auto; overflow-y: hidden;
  border-top: 1px solid var(--line-soft); background: var(--surface-2); scrollbar-width: none; }
body:not(.chart-fit) .cpane > .sheetbar { position: static; }
.cpane > .sheetbar::-webkit-scrollbar { display: none; }
.sheetbar .sh { flex: none; border: 0; border-top: 2px solid transparent; background: none; color: var(--text-dim);
  font: inherit; font-size: 11.5px; line-height: 1; padding: 0 10px; cursor: pointer; white-space: nowrap; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; }
.sheetbar .sh:hover { color: var(--text); background: var(--surface); }
.sheetbar .sh.unused { color: var(--text-faint); }
.sheetbar .sh.is-on { color: var(--text); background: var(--surface); border-top-color: var(--accent); font-weight: 700; }
.sheetbar .sh-edit { font: inherit; font-size: 11.5px; width: 110px; margin: 2px 4px; padding: 0 6px;
  border: 1px solid var(--accent); border-radius: 4px; background: var(--surface); color: var(--text); }
.cstage.multi .sheetbar .sh { padding: 0 7px; max-width: 90px; }
@media (max-width: 900px) { .cpane.has-sheets { --shH: 30px; } .sheetbar .sh { padding: 0 11px; font-size: 12px; } }

/* 29t: AFL Explore inside the Screener, plus its code and parameter boxes */
.fxx-inline { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); padding: 0 16px 14px; }
.fxx-status code, .fxx-notes code { display: inline; padding: 0 3px; margin: 0; font-size: 12px; background: var(--surface-2); border-radius: 3px; white-space: nowrap; }
.fxx-inline .fxx-bar { padding: 10px 2px; }
.fxx-inline .fxx-status { padding: 8px 2px; }
.fxx-inline .fxx-out { max-height: 70vh; overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; }
.fxx-inline .fxx-out:empty { display: none; }
.fxx-fl select { min-width: 260px; }
.fxx-bar > button[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.fxx-code { padding: 0 16px 10px; display: grid; gap: 6px; }
.fxx-inline .fxx-code, .fxx-inline .fxx-params { padding-left: 2px; padding-right: 2px; }
.fxx-codebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fxx-codebar input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text); min-width: 200px; }
.fxx-codebar button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.fxx-cmsg { font-size: 12px; color: var(--text-dim); } .fxx-cmsg.bad { color: var(--down); } .fxx-cmsg.good { color: var(--up); }
.fxx-ta-unused {
  padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); tab-size: 4; }
.fxx-params { padding: 0 16px 10px; }
.fxx-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 20px; }
.fxx-params .fx-p input[type=number] { width: 90px; }
@media (max-width: 640px) { .fxx-fl select { min-width: 0; width: 100%; } .fxx-code, .fxx-params { padding-left: 12px; padding-right: 12px; } }

/* 29v: the AFL code editor - line numbers, AmiBroker-style colours, error lines */
:root { --afe-kw: #00008B; --afe-fn: #0000E0; --afe-uf: #8B008B; --afe-rs: #A0005A; --afe-cst: #007070; --afe-num: #B35900;
  --afe-str: #A31515; --afe-cmt: #008000; --afe-pre: #808080; --afe-lit: #00008B; --afe-bg: #FFFFFF; --afe-err: rgba(220, 38, 38, .16); --afe-warn: rgba(217, 119, 6, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --afe-kw: #7AA2F7; --afe-fn: #61AFEF; --afe-uf: #D38AEA; --afe-rs: #F07CA8;
  --afe-cst: #4EC9B0; --afe-num: #E5A45A; --afe-str: #E68A6E; --afe-cmt: #6A9955; --afe-pre: #8B949E; --afe-lit: #7AA2F7; --afe-bg: #0E141B; } }
:root[data-theme="dark"] { --afe-kw: #7AA2F7; --afe-fn: #61AFEF; --afe-uf: #D38AEA; --afe-rs: #F07CA8;
  --afe-cst: #4EC9B0; --afe-num: #E5A45A; --afe-str: #E68A6E; --afe-cmt: #6A9955; --afe-pre: #8B949E; --afe-lit: #7AA2F7; --afe-bg: #0E141B; }
.afe { position: relative; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--afe-bg);
  min-height: 320px; --afe-font: 13px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.fx-code.afe { border: 1px solid var(--line); }
.fxx-ed.afe { height: 380px; resize: vertical; }
.afe-gut { flex: none; margin: 0; padding: 8px 8px 8px 6px; min-width: 38px; text-align: right; color: var(--text-faint); background: var(--surface);
  border-right: 1px solid var(--line-soft); font: var(--afe-font); overflow: hidden; user-select: none; }
.afe-gut b { color: #fff; background: var(--down); border-radius: 3px; padding: 0 3px; font-weight: 700; }
.afe-gut b.warning { background: #d97706; }
.afe-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.afe-hl, .afe-ta { margin: 0; padding: 8px 10px; font: var(--afe-font); white-space: pre; tab-size: 4; letter-spacing: 0; word-spacing: 0; }
.afe-hl { position: absolute; top: 0; left: 0; min-width: 100%; color: var(--text); pointer-events: none; will-change: transform; }
.afe-marks { position: absolute; inset: 0 0 auto 0; pointer-events: none; will-change: transform; }
.afe-line { position: absolute; left: 0; right: 0; background: var(--afe-err); border-left: 3px solid var(--down); }
.afe-line.warning { background: var(--afe-warn); border-left-color: #d97706; }
.afe-ta { position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 0; outline: 0; resize: none;
  background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text); overflow: auto; }
.afe-ta::selection { background: rgba(80, 130, 230, .30); -webkit-text-fill-color: transparent; }
.afe-hl i { font-style: normal; }
.afe-hl .k { color: var(--afe-kw); font-weight: 700; }
.afe-hl .f { color: var(--afe-fn); }
.afe-hl .u { color: var(--afe-uf); font-weight: 600; }
.afe-hl .r { color: var(--afe-rs); font-weight: 600; }
.afe-hl .o { color: var(--afe-cst); }
.afe-hl .n { color: var(--afe-num); }
.afe-hl .s { color: var(--afe-str); }
.afe-hl .c { color: var(--afe-cmt); font-style: italic; }
.afe-hl .p { color: var(--afe-pre); }
.afe-hl .l { color: var(--afe-lit); font-weight: 700; }
.afe-res { font-size: 12.5px; color: var(--text); }
.afe-res .bad { color: var(--down); } .afe-res .good { color: var(--up); }
.afe-res ul { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 2px; max-height: 180px; overflow: auto; }
.afe-res li { padding: 3px 8px; border-radius: 4px; color: var(--text); }
.afe-res li.error { background: var(--afe-err); } .afe-res li.warning { background: var(--afe-warn); } .afe-res li.note { color: var(--text-dim); }
.afe-res li a { font-family: var(--mono); font-weight: 700; color: inherit; margin-right: 6px; }
.fx-msg .afe-res { margin-top: 2px; }
.fxx-vres:empty { display: none; }
@media (max-width: 640px) { .afe { --afe-font: 12px/17px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } }

/* 29w: editor suggestions (as you type) and the signature tip */
.afe-ac, .afe-tip { position: fixed; z-index: 1200; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font: 12.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.afe-ac[hidden], .afe-tip[hidden] { display: none; }
.afe-ac { min-width: 220px; max-width: min(520px, 92vw); max-height: 300px; overflow: auto; padding: 3px 0; }
.afe-ai { display: flex; gap: 8px; align-items: baseline; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.afe-ai span { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.afe-ai.on { background: var(--accent-soft, rgba(80,130,230,.18)); }
.afe-ai i { font-style: normal; font-weight: 600; }
.afe-ai i.f { color: var(--afe-fn); } .afe-ai i.o { color: var(--afe-cst); } .afe-ai i.r { color: var(--afe-rs); } .afe-ai i.v { color: var(--text); }
.afe-adesc { border-top: 1px solid var(--line-soft); padding: 5px 10px 3px; color: var(--text-dim); font-family: var(--sans, system-ui); font-size: 12px; white-space: normal; }
.afe-tip { padding: 5px 10px; max-width: min(640px, 94vw); pointer-events: none; }
.afe-sig b { font-weight: 600; color: var(--afe-fn); }
.afe-sig em { font-style: normal; font-weight: 700; color: #C62828; }
:root[data-theme="dark"] .afe-sig em { color: #FF6B6B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .afe-sig em { color: #FF6B6B; } }
.afe-sdesc { color: var(--text-dim); font-family: var(--sans, system-ui); font-size: 12px; margin-top: 2px; }

/* 29x: the right-hand icon bar (desktop) - each icon opens a side panel */
.sideicons { display: none; }
body.desk.chart-fit .sideicons { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0;
  background: var(--surface); border-left: 1px solid var(--line); min-height: 0; overflow-y: auto; }
.sideicons .si { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none;
  color: var(--text-dim); cursor: pointer; }
.sideicons .si svg { width: 20px; height: 20px; }
.sideicons .si:hover { background: var(--surface-2); color: var(--text); }
.sideicons .si.is-on { background: var(--accent-soft, rgba(80,130,230,.16)); color: var(--accent); }
.sideicons .si-sep { width: 22px; height: 1px; background: var(--line); margin: 4px 0; }
/* a title and a close button on the desktop panel */
body.desk.chart-fit .cside .sheet-head { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 2; background: var(--surface); }
body.desk.chart-fit .cside .sheet-head button { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 14px; }
body.desk.chart-fit .cside .sheet-info { padding: 6px 12px 14px; }
body.desk.chart-fit[data-side="tech"] .cside .side-watch, body.desk.chart-fit[data-side="tech"] .cside .side-scrip,
body.desk.chart-fit[data-side="tech"] .cside #chartConditions,
body.desk.chart-fit[data-side="funda"] .cside .side-watch, body.desk.chart-fit[data-side="funda"] .cside .side-scrip,
body.desk.chart-fit[data-side="funda"] .cside #chartConditions { display: none; }
body.desk.chart-fit .cdesk > .toolrail { grid-column: 1; grid-row: 1; }
body.desk.chart-fit .cdesk > .cmain { grid-column: 2; grid-row: 1; }
body.desk.chart-fit .cdesk > .cside { grid-column: 3; grid-row: 1; }
body.desk.chart-fit .cdesk > .sideicons { grid-column: 4; grid-row: 1; }
body.desk.chart-fit .cside .sheet-head::before { display: none; }
body.desk.chart-fit .cside { position: relative; }
.side-grip { display: none; }
body.desk.chart-fit .side-grip { display: block; position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 5; }
body.desk.chart-fit .side-grip:hover, body.side-dragging .side-grip { background: var(--accent); opacity: .35; }
body.side-dragging { cursor: col-resize; user-select: none; }

/* 30c: Technicals and Fundamentals fitted to the side panel's default width */
body.desk.chart-fit .cside #sheetInfo { padding: 8px 10px 14px; }
body.desk.chart-fit .cside .tfchips { gap: 4px; }
body.desk.chart-fit .cside .tfchip { padding: 3px 7px; font-size: 11px; }
body.desk.chart-fit .cside .gauges { grid-template-columns: 1fr 1fr; gap: 10px 8px; align-items: start; }
body.desk.chart-fit .cside .gblock.big { grid-column: 1 / -1; order: -1; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
body.desk.chart-fit .cside .gblock.big svg.gauge { max-width: 210px; }
body.desk.chart-fit .cside .gblock:not(.big) svg.gauge { max-width: 130px; }
body.desk.chart-fit .cside .gblock .gtitle { font-size: 12px; }
body.desk.chart-fit .cside .gblock.big .gtitle { font-size: 14px; }
body.desk.chart-fit .cside .glabel { font-size: 14px; }
body.desk.chart-fit .cside .gblock.big .glabel { font-size: 18px; }
body.desk.chart-fit .cside .gcounts { gap: 6px; font-size: 10.5px; flex-wrap: wrap; }
body.desk.chart-fit .cside .gsince { font-size: 10.5px; line-height: 1.35; }
body.desk.chart-fit .cside .ttable { margin-top: 12px; }
body.desk.chart-fit .cside .tt-h { font-size: 13px; flex-wrap: wrap; gap: 4px 8px; }
/* the indicator tables: name, value and lean on one line, the condition
   underneath - four columns do not fit in the panel */
body.desk.chart-fit .cside table.tbl.tech:not(.piv) { width: 100%; font-size: 11.5px; }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) thead tr,
body.desk.chart-fit .cside table.tbl.tech:not(.piv) tbody tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 62px; align-items: baseline;
  border-bottom: 1px solid var(--line-soft); }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) th:nth-child(3) { display: none; }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) td,
body.desk.chart-fit .cside table.tbl.tech:not(.piv) th { padding: 4px 4px; border: 0; }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) td.nm { grid-column: 1; grid-row: 1; white-space: normal; }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) td.r { grid-column: 2; grid-row: 1; }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) td.rd { grid-column: 3; grid-row: 1; text-align: right; }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) td.cond { grid-column: 1 / -1; grid-row: 2; padding-top: 0; font-size: 10.5px; color: var(--text-faint); }
body.desk.chart-fit .cside table.tbl.tech:not(.piv) th:nth-child(4) { text-align: right; }
body.desk.chart-fit .cside table.tbl.piv { font-size: 11px; }
body.desk.chart-fit .cside table.tbl.piv td, body.desk.chart-fit .cside table.tbl.piv th { padding: 4px 5px; }
body.desk.chart-fit .cside .pivwrap { overflow-x: auto; }
body.desk.chart-fit .cside .note { font-size: 11px; }
body.desk.chart-fit .cside .fgrid { grid-template-columns: 1fr; }
body.desk.chart-fit .cside .fname { font-size: 15px; }
body.desk.chart-fit .cside .tbl-wrap { overflow-x: auto; }

/* 30d: market depth - under the watchlist, and from the Watch tab */
.side-depth { display: none; }
body.desk.chart-fit .cside .side-depth, body.chart-fit:not(.desk) .cside .side-depth, .side-depth.dp-modal { display: block; }
body.desk.chart-fit[data-side="tech"] .cside .side-depth, body.desk.chart-fit[data-side="funda"] .cside .side-depth { display: none; }
body.chart-fit:not(.desk) .cside .side-depth { order: 5; }
.side-depth { border-top: 1px solid var(--line); padding: 8px 12px 10px; font-size: 12px; }
.dp-modal { border: 0; padding: 0; }
.dp-head { display: flex; align-items: center; gap: 8px; }
.dp-tog { border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; display: flex; gap: 6px; align-items: baseline; }
.dp-tog b { font-size: 12.5px; }
.dp-tog::before { content: '▾'; color: var(--text-faint); font-size: 10px; }
.dp-closed .dp-tog::before { content: '▸'; }
.dp-closed .dp-body { display: none; }
.dp-modal .dp-tog::before { content: none; }
.dp-t { font-family: var(--mono); color: var(--text-dim); font-size: 11.5px; }
.dp-head .dp-t { font-size: 11.5px; }
.dp-when { margin-left: auto; font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
.dp-ref { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px; width: 26px; height: 24px; cursor: pointer; font-size: 14px; line-height: 1; }
.dp-busy .dp-ref { animation: dpspin 1s linear infinite; }
@keyframes dpspin { to { transform: rotate(360deg); } }
.dp-body { margin-top: 6px; }
.dp-msg { color: var(--text-dim); padding: 6px 0; } .dp-msg.bad { color: var(--down); }
.dp-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.dp-bar i { display: block; height: 100%; }
.dp-bar i.b { background: var(--up); } .dp-bar i.s { background: var(--down); }
.dp-tot { display: flex; justify-content: space-between; font: 600 11px var(--mono); margin: 3px 0 6px; }
.dp-tot .up { color: var(--up); } .dp-tot .down { color: var(--down); }
table.dp-t { width: 100%; border-collapse: collapse; font: 11px var(--mono); color: var(--text); }
table.dp-t th { font: 600 9.5px var(--sans, system-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: 2px 3px; text-align: right; }
table.dp-t th:nth-child(4), table.dp-t th:nth-child(5), table.dp-t th:nth-child(6) { text-align: left; }
table.dp-t td { padding: 2px 3px; text-align: right; white-space: nowrap; }
table.dp-t td:nth-child(n+4) { text-align: left; }
table.dp-t td.dp-p.up { color: var(--up); font-weight: 700; } table.dp-t td.dp-p.down { color: var(--down); font-weight: 700; }
table.dp-t td:nth-child(3) { border-right: 1px solid var(--line); }
table.dp-t td.dp-v { background: linear-gradient(to left, color-mix(in srgb, var(--up) 22%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
table.dp-t td.dp-v.s { background: linear-gradient(to right, color-mix(in srgb, var(--down) 22%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
table.dp-t td.dp-pc { color: var(--text-faint); font-size: 10px; }
table.dp-t tfoot td { border-top: 1px solid var(--line); font-weight: 700; background: none; padding-top: 3px; }
.dp-src { font-size: 10px; color: var(--text-faint); margin-top: 5px; line-height: 1.35; }
.w-depth { border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim); border-radius: 5px; font: 600 10px var(--sans, system-ui); padding: 1px 6px; margin-left: 4px; cursor: pointer; vertical-align: 1px; }
.w-depth:hover { color: var(--text); border-color: var(--accent); }
.dp-modal table.dp-t { font-size: 12.5px; } .dp-modal table.dp-t td { padding: 4px 6px; }
@media (max-width: 520px) { .dp-modal table.dp-t { font-size: 11px; } .dp-modal table.dp-t td { padding: 3px 2px; } table.dp-t th { font-size: 8.5px; padding: 2px 1px; } }

/* 30e: the script picker under the chart's script box */
.tkpop { position: fixed; z-index: 1100; width: 320px; max-width: calc(100vw - 8px); overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.2); padding: 3px 0; }
.tkpop[hidden] { display: none; }
.tk-i { display: grid; grid-template-columns: 96px minmax(0,1fr) auto 58px; gap: 8px; align-items: baseline; padding: 5px 10px; cursor: pointer; font-size: 12.5px; }
.tk-i b { font-family: var(--mono); font-size: 12.5px; }
.tk-i .tk-sec { color: var(--text-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-i .tk-px { font-family: var(--mono); font-size: 12px; text-align: right; }
.tk-i .tk-ch { font-family: var(--mono); font-size: 11.5px; text-align: right; }
.tk-i .tk-ch.up { color: var(--up); } .tk-i .tk-ch.down { color: var(--down); }
.tk-i:hover { background: var(--surface-2); }
.tk-i.on { background: var(--accent-soft, rgba(80,130,230,.16)); }
.tk-i.cur b { color: var(--accent); }
.tk-none { padding: 10px; color: var(--text-faint); font-size: 12.5px; }
@media (max-width: 640px) { .tk-i { grid-template-columns: 90px minmax(0,1fr) auto 54px; padding: 8px 10px; } }

/* 30f: market state - a green circle while open, a red square when closed */
.mstate.open { border-radius: 50%; }
.mstate.open::after { border-radius: 50%; }
.mstate.shut { border-radius: 2px; }

/* ============================================ themes, compact chrome (30l)
   Palettes sit on top of the light or dark base (data-theme), so only the
   surfaces and the accent move. Up and down keep their colours.           */
:root[data-palette="paper"] {
  --bg: #F4EFE4; --surface: #FFFCF5; --surface-2: #EEE7D8;
  --line: #DCD2BE; --line-soft: #E8E0CF;
  --text: #2A2418; --text-dim: #685D48; --text-faint: #928670;
  --accent: #8A4B14; --accent-ink: #FFF7EC; --accent-soft: rgba(138,75,20,.10);
}
:root[data-palette="arctic"] {
  --bg: #EDF2F8; --surface: #FFFFFF; --surface-2: #E4ECF6;
  --line: #CFDAE8; --line-soft: #DFE7F1;
  --text: #0D1B2E; --text-dim: #475B76; --text-faint: #7688A1;
  --accent: #1D5FD1; --accent-ink: #FFFFFF; --accent-soft: rgba(29,95,209,.10);
}
:root[data-palette="midnight"] {
  --bg: #0A1020; --surface: #111A2E; --surface-2: #17223A;
  --line: #24314D; --line-soft: #1A2540;
  --text: #E4EAF6; --text-dim: #93A3C0; --text-faint: #62718F;
  --accent: #5B9CFF; --accent-ink: #06122A; --accent-soft: rgba(91,156,255,.16);
}
:root[data-palette="graphite"] {
  --bg: #111214; --surface: #1A1B1E; --surface-2: #222428;
  --line: #303238; --line-soft: #26282C;
  --text: #ECECEE; --text-dim: #A2A5AC; --text-faint: #6F737B;
  --accent: #A78BFA; --accent-ink: #160B33; --accent-soft: rgba(167,139,250,.15);
}

/* the theme switch, beside the clock */
.tb-end { display: flex; align-items: center; gap: 10px; flex: none; }
.themebtn {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--text-dim); cursor: pointer; padding: 0;
}
.themebtn:hover { color: var(--accent); border-color: var(--accent); }
.themebtn svg { width: 15px; height: 15px; }
.thmenu { min-width: 190px; }
.thmenu button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; }
.thmenu button.is-on { background: var(--accent-soft); }
.thmenu .th-ok { margin-left: auto; color: var(--accent); font-weight: 700; }
.thmenu .th-h { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); padding: 8px 10px 3px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.th-sw { display: inline-flex; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); flex: none; }
.th-sw i { width: 10px; height: 16px; display: block; }

/* ---- desk header: one slim line ---- */
body.desk .topbar-in { padding-block: 3px; gap: 14px; min-height: 40px; }
body.desk .brand-mark { height: 17px; width: 8px; }
body.desk .brand-name { font-size: 15px; }
body.desk .topbar .clock { font-size: 14px; }
body.desk .tabbar .tab { padding: 4px 10px; font-size: 12.5px; font-weight: 500; }
body.desk .tabbar .tab svg { width: 15px; height: 15px; }
body.desk .tabbar .tab.is-on { font-weight: 600; }
body.desk .userbtn { padding: 2px 9px 2px 2px; font-size: 12px; margin-right: 4px; }
body.desk .userbtn .ub-av { width: 22px; height: 22px; font-size: 11px; }
body.desk .topbar-in .hl { font-size: 12px; }

/* ---- desk chart toolbar: ghost buttons, one 34px row ---- */
body.desk.chart-fit .chartbar { padding: 3px 8px; gap: 2px; background: var(--surface); }
body.desk.chart-fit .chartbar input {
  height: 28px; padding: 0 9px; flex: 0 1 180px; font-size: 13px; font-weight: 600;
  background: var(--bg); border-color: transparent;
}
body.desk.chart-fit .chartbar input:hover { border-color: var(--line); }
body.desk.chart-fit .chartbar input:focus { border-color: var(--accent); }
body.desk.chart-fit .chartbar .cbtn {
  height: 28px; padding: 0 9px; border-color: transparent; background: transparent;
  color: var(--text); font-size: 12.5px;
}
body.desk.chart-fit .chartbar .cbtn:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
body.desk.chart-fit .chartbar .cbtn.armed,
body.desk.chart-fit .chartbar .infobtn.armed { background: var(--accent-soft); color: var(--accent); }
body.desk.chart-fit .chartbar > .cbtn + .cbtn:not(.infobtn)::before {
  content: ""; width: 1px; height: 16px; background: var(--line); margin: 0 7px 0 -11px;
}
body.desk.chart-fit .chartbar .cbtn.icon::before,
body.desk.chart-fit .chartbar .cbtn:first-of-type::before { display: none; }
body.desk.chart-fit .chartbar .infobtn { font-weight: 500; color: var(--text-dim); }
body.desk.chart-fit .chartbar .infobtn:hover { color: var(--text); }

/* ---- desk drawing rail ---- */
body.desk.chart-fit .cdesk { grid-template-columns: 42px minmax(0, 1fr) var(--sideW, 320px) 44px; }
body.desk.chart-fit.side-closed .cdesk { grid-template-columns: 42px minmax(0, 1fr) 0 44px; }
@media (max-width: 1279px) {
  body.desk.chart-fit .cdesk { grid-template-columns: 42px minmax(0, 1fr) var(--sideW, 290px) 44px; }
  body.desk.chart-fit.side-closed .cdesk { grid-template-columns: 42px minmax(0, 1fr) 0 44px; }
}
body.desk.chart-fit .toolrail { gap: 1px; padding: 6px 0; scrollbar-width: none; }
body.desk.chart-fit .toolrail::-webkit-scrollbar { display: none; }
.rtool { width: 32px; height: 30px; color: var(--text-dim); transition: background .12s, color .12s; }
.rtool .ic { width: 19px; height: 19px; }
.rtool.is-on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.rsep { width: 20px; margin: 4px 0; background: var(--line-soft); }
.rtool.rauto { font: 700 12px var(--mono); }

/* ======================================================= permissions (30n) */
.ua-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 0 8px;
  border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--text-dim); }
.ua-top button, .ua-act .ua-perm { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft);
  border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pe-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: -14px; z-index: 2;
  background: var(--surface); padding: 8px 0 10px; border-bottom: 1px solid var(--line-soft); }
.pe-back { border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }
.pe-n { font-size: 12px; color: var(--text-faint); }
.pe-n button, .pe-all { border: 0; background: none; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; padding: 0 4px;
  text-transform: none; letter-spacing: 0; }
.pe-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 7px 4px; border-bottom: 1px solid var(--line-soft); }
.pe-row.custom { background: var(--accent-soft); border-radius: 6px; }
.pe-t { display: grid; min-width: 0; }
.pe-t b { font-size: 13px; font-weight: 600; }
.pe-t span { font-size: 11.5px; color: var(--text-faint); }
.pe-t em { font-style: normal; color: var(--text-dim); }
.pe-src { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.pe-reset { border: 1px solid var(--accent); color: var(--accent); background: var(--surface); border-radius: 999px;
  font: inherit; font-size: 10.5px; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.pe-sw { border: 0; background: none; padding: 0; cursor: pointer; }
.psw { display: block; width: 34px; height: 19px; border-radius: 10px; background: var(--line); position: relative; transition: background .15s; }
.psw i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.psw.on { background: var(--up); }
.psw.on i { left: 17px; }
.pe-foot { display: flex; align-items: center; gap: 12px; position: sticky; bottom: -14px; background: var(--surface);
  padding: 12px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.pe-msg { font-size: 12px; color: var(--text-dim); }
.afe-ro .afe-ta { cursor: default; }
@media (max-width: 560px) { .pe-row { grid-template-columns: auto 1fr; } .pe-src, .pe-reset { grid-column: 2; justify-self: start; } }

/* ============================================================ trading (30p) */
.tradebox { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: 6px;
  padding-left: 8px; border-left: 1px solid var(--line); }
.tradebox[hidden] { display: none; }
.tradebox input { width: 74px; height: 28px; padding: 0 6px; font: 600 12.5px var(--mono);
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); }
.tradebox input:focus { outline: 0; border-color: var(--accent); }
.tradebox input::placeholder { color: var(--text-faint); font-weight: 500; }
.cbtn.tr-buy, .cbtn.tr-sell { font-weight: 700; color: #fff !important; border: 0 !important; min-width: 50px; justify-content: center; }
.cbtn.tr-buy { background: var(--up) !important; }
.cbtn.tr-sell { background: var(--down) !important; }
.cbtn.tr-buy:hover, .cbtn.tr-sell:hover { filter: brightness(1.1); }
body.chart-fit:not(.desk) .tradebox input { width: 48px; }
body.chart-fit:not(.desk) .cbtn.tr-buy, body.chart-fit:not(.desk) .cbtn.tr-sell { min-width: 0; padding: 0 8px; }

/* confirmation */
.trc { display: grid; gap: 12px; }
.trc-side { font: 800 13px var(--mono); letter-spacing: .1em; padding: 4px 10px; border-radius: 6px; justify-self: start; color: #fff; }
.trc.buy .trc-side { background: var(--up); } .trc.sell .trc-side { background: var(--down); }
.trc-t { border-collapse: collapse; width: 100%; font-size: 14px; }
.trc-t td { padding: 6px 4px; border-bottom: 1px solid var(--line-soft); }
.trc-t td:first-child { color: var(--text-dim); width: 34%; }
.trc-t input { width: 130px; height: 30px; padding: 0 8px; font: 600 14px var(--mono); background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; }
.trc-amt { font: 700 15px var(--mono); }
.tr-live { color: var(--down); }
.trc-note { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.trc-btns { display: flex; gap: 8px; }
.trc.buy .trc-go { background: var(--up); border-color: var(--up); color: #fff; }
.trc.sell .trc-go { background: var(--down); border-color: var(--down); color: #fff; }

/* order messages, bottom right */
#tradeMsgs { position: fixed; right: 14px; bottom: 14px; z-index: 960; display: grid; gap: 8px; width: min(380px, calc(100vw - 28px)); }
.trmsg { position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 10px 30px 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 12.5px; line-height: 1.45; }
.trmsg b { display: block; font: 700 12.5px var(--mono); margin-bottom: 2px; }
.trmsg.ok { border-left-color: var(--up); } .trmsg.error { border-left-color: var(--down); } .trmsg.warn { border-left-color: #D98E04; }
.trmsg.info { border-left-color: var(--accent); }
.trm-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; color: var(--text-dim); cursor: pointer; }
.trm-set { margin-top: 6px; border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); border-radius: 6px;
  padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; }

/* trading settings */
.ts-eng { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.ts-eng i { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--down); }
.ts-eng.ok i { background: var(--up); } .ts-eng.warn i { background: #D98E04; }
.ts-eng div { display: grid; gap: 2px; font-size: 13px; } .ts-eng span { color: var(--text-dim); } .ts-seen { font-size: 11.5px; }
.ts-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; font-size: 13px; }
.ts-row input[type=number] { width: 90px; height: 30px; margin-left: 8px; padding: 0 8px; font: 600 13px var(--mono);
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.ts-row button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px; padding: 6px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ts-row button.warn { color: var(--down); }
.ts-row button.run { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ts-hint, .ts-msg { font-size: 11.5px; color: var(--text-faint); }
.ts-chk { display: inline-flex; gap: 6px; align-items: center; }
.ts-steps { margin: 6px 0 8px 18px; padding: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.ts-key { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--accent-soft); font-size: 12.5px; }
.ts-key code { font: 600 13px var(--mono); word-break: break-all; user-select: all; }
.ts-key button { justify-self: start; border: 1px solid var(--accent); background: var(--surface); color: var(--accent); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.ts-ord { width: 100%; border-collapse: collapse; font-size: 12px; }
.ts-ord th, .ts-ord td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.ts-ord .r { text-align: right; font-family: var(--mono); }
.ts-ord tr.ok b { color: var(--up); } .ts-ord tr.error b { color: var(--down); } .ts-ord tr.warn b { color: #D98E04; }
.ts-om { color: var(--text-faint); font-size: 11px; max-width: 280px; }

/* explore rows */
.fxx-trade { white-space: nowrap; }
.fxb { border: 0; border-radius: 4px; padding: 2px 7px; font: 700 11px var(--mono); color: #fff; cursor: pointer; margin-right: 3px; }
.fxb.buy { background: var(--up); } .fxb.sell { background: var(--down); }

/* ======================================================= tool rail groups (30r) */
.rgrp { position: relative; flex: none; }
.rmore { position: absolute; right: -1px; bottom: 1px; width: 9px; height: 9px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rmore::after { content: ""; position: absolute; right: 1px; bottom: 1px; border-style: solid; border-width: 0 0 5px 5px;
  border-color: transparent transparent var(--text-faint) transparent; }
.rgrp:hover .rmore::after { border-bottom-color: var(--accent); }
.railfly { position: fixed; z-index: 950; min-width: 230px; max-height: 80vh; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.rf-h { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 5px 8px 4px; }
.rf-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 6px;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.rf-i:hover { background: var(--surface-2); }
.rf-i.is-on { background: var(--accent-soft); color: var(--accent); }
.rf-ic .ic { width: 19px; height: 19px; display: block; }
.stk { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.stk button { font-size: 24px; padding: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.stk button:hover { border-color: var(--accent); }

/* ============================================================ Top 10 (30s) */
.cside .side-top { display: none; }
body.desk.chart-fit[data-side="top"] .cside .side-top { display: block; }
body.desk.chart-fit[data-side="top"] .cside .side-watch,
body.desk.chart-fit[data-side="top"] .cside .side-depth,
body.desk.chart-fit[data-side="top"] .cside .side-scrip,
body.desk.chart-fit[data-side="top"] .cside #chartConditions,
body.desk.chart-fit[data-side="top"] .cside .sheet-info { display: none !important; }
.top-seg { margin: 0 12px 8px; display: flex; }
.top-seg button { flex: 1; }
.top-cols, .top-row { grid-template-columns: 20px minmax(0, 1.4fr) 1fr .9fr 1fr !important; }
.sw-i { color: var(--text-faint); font: 11px var(--mono); }
.top-cols span:nth-child(2), .top-row .sw-t { text-align: left; }

/* ================================================ selected-drawing bar (30s) */
.chart-box { position: relative; }
.drawbar2 { position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 3px 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16); user-select: none; white-space: nowrap; }
.drawbar2[hidden] { display: none; }
.db-grip { cursor: grab; color: var(--text-faint); font-size: 12px; letter-spacing: -2px; padding: 0 5px 0 2px; }
.db-b { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 6px; justify-content: center;
  border: 0; background: transparent; color: var(--text); border-radius: 6px; cursor: pointer; font: 12px var(--mono); position: relative; }
.db-b:hover { background: var(--surface-2); }
.db-b.is-on { color: var(--accent); background: var(--accent-soft); }
.db-b .ic { width: 18px; height: 18px; }
.db-del:hover { color: var(--down); }
.db-col input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.db-sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line); display: block; }
.db-line { display: inline-block; width: 16px; border-radius: 2px; }
.db-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.db-menu { display: grid; min-width: 120px; }
.db-menu button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; background: none; color: var(--text);
  border-radius: 6px; font: 12.5px var(--mono); cursor: pointer; text-align: left; }
.db-menu button:hover { background: var(--surface-2); }
.db-menu button.is-on { color: var(--accent); }
.db-menu .ic { width: 18px; height: 18px; }
.top-row .sw-v, .top-cols span { white-space: nowrap; }
.top-head { padding-top: 4px; padding-bottom: 6px; }
/* the top list uses the panel's whole height */
#sideTop .sw-list { max-height: none; overflow: visible; }

/* ============================================================ script list (30u) */
#tsModal .tsm-card:has(.un-list) { width: min(980px, 100%); }
.un-top { display: grid; gap: 8px; padding-bottom: 8px; }
.un-mode { display: flex; flex-wrap: wrap; }
.un-sum { font-size: 12.5px; color: var(--text-dim); }
.un-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  position: sticky; top: -14px; background: var(--surface); z-index: 2; }
.un-tools input { flex: 1 1 180px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: 13px var(--mono); }
.un-tools button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px; padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.un-lbl { font-size: 11.5px; color: var(--text-faint); margin-left: 6px; }
.un-sec { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.un-sh { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.un-sh span { color: var(--text-faint); font: 11.5px var(--mono); }
.un-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 3px 8px; margin: 6px 0 0 22px; }
.un-it { display: flex; align-items: center; gap: 5px; font: 12px var(--mono); padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.un-it.on { background: var(--accent-soft); }
.un-it i { font-style: normal; font-size: 10px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; }

/* ==========================================================================
   10-01a: phone chart - more room for the candles
   The header (brand, clock, DSEX line) is hidden on the chart view; DSEX
   rides on the chart, top right, level with the scrip's name. The tab bar
   and the sheet tabs are slimmer.
   ========================================================================== */
.cdsex { display: none; }
body.chart-fit:not(.desk) #topbar { display: none; }
body.chart-fit:not(.desk) .cdsex {
  display: block; position: absolute; top: 4px; right: 4px; z-index: 2;
  pointer-events: none; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; line-height: 20px; font-variant-numeric: tabular-nums;
  color: var(--text-dim); padding: 0 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
body.chart-fit:not(.desk) .cdsex:empty { display: none; }
body.chart-fit:not(.desk) .cdsex i { font-style: normal; color: var(--text-faint); font-weight: 600; }
body.chart-fit:not(.desk) .cdsex.up b { color: var(--up); }
body.chart-fit:not(.desk) .cdsex.down b { color: var(--down); }
body.chart-fit:not(.desk) .cdsex b { font-weight: 600; }
/* the scrip's name line stops short of the DSEX tag */
body.chart-fit:not(.desk) #pane0 .chart-head { padding-right: max(0px, calc(var(--dsexW, 0px) - 56px)); }
body.chart-fit:not(.desk) .cstage.multi .cdsex { display: none; }

/* slimmer tab bar on a phone: smaller icons, less padding */
body:not(.desk) .tabbar .tab { padding: 4px 2px 3px; gap: 1px; font-size: 9.5px; }
body:not(.desk) .tabbar .tab svg { width: 17px; height: 17px; }
body:not(.desk) .tabbar .tab-n { top: 1px; }
body:not(.desk) { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
body.chart-fit:not(.desk) { padding-bottom: 0; }

/* slimmer sheet tabs on a phone */
@media (max-width: 900px) {
  .cpane.has-sheets { --shH: 23px; }
  .sheetbar .sh { padding: 0 10px; font-size: 11px; }
}

/* 10-01b: drawing opacity on the floating bar - a swatch over a checker
   board, so you see how see-through the drawing is */
.db-op { gap: 5px; font-variant-numeric: tabular-nums; }
.db-opic { position: relative; display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none;
  background: conic-gradient(#bbb 25%, #fff 0 50%, #bbb 0 75%, #fff 0) 0 0 / 7px 7px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); }
.db-opic::after { content: ""; position: absolute; inset: 0; background: var(--c); opacity: var(--o); }
.db-opm { min-width: 170px; }
.db-opr { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
.db-opr input { flex: 1; accent-color: var(--accent); }
.db-opr b { font-family: var(--mono); font-size: 12px; min-width: 38px; text-align: right; }

/* ==========================================================================
   10-01c: A / U price history switch, adjusted-data upload, custom theme
   ========================================================================== */
.adjseg { display: inline-flex; flex: none; height: 32px; border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.adjseg button { border: 0; background: none; color: var(--text-faint); font: inherit; font-family: var(--mono);
  font-size: 12.5px; font-weight: 700; width: 28px; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.adjseg button + button { border-left: 1px solid var(--line); }
.adjseg button:hover { color: var(--text); }
.adjseg button.is-on { color: var(--accent-ink); background: var(--accent); }
@media (max-width: 900px) { .adjseg { height: 30px; } .adjseg button { width: 26px; font-size: 12px; } }
body.desk .adjseg { height: 28px; }
.formtag.adj { color: var(--accent); }

.btn-acc { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit;
  font-weight: 600; border-radius: var(--r-sm); padding: 7px 14px; cursor: pointer; }
.btn-acc:disabled { opacity: .55; cursor: wait; }
.adj-sum { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.adj-sum b { color: var(--text); font-family: var(--mono); }
.adj-up { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.adj-file { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.adj-file input { max-width: 100%; font: inherit; font-size: 12.5px; color: var(--text-dim); }
.adj-file span { display: none; }
.adj-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--text-dim); align-items: center; }
.adj-opts label { display: inline-flex; align-items: center; gap: 6px; }
.adj-tk input { width: 150px; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--surface); color: var(--text); text-transform: uppercase; }
.adj-up .btn-acc { justify-self: start; }
.adj-msg { font-size: 12.5px; color: var(--text-dim); min-height: 1em; }
.adj-msg.bad { color: var(--down); }
.adj-msg .ok { color: var(--up); font-weight: 600; }
.adj-help { margin: 12px 0; font-size: 12.5px; color: var(--text-dim); }
.adj-help summary { cursor: pointer; color: var(--text); font-weight: 600; }
.adj-help pre { font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 8px 10px; overflow-x: auto; color: var(--text); }
.adj-help code { font-family: var(--mono); font-size: 11.5px; color: var(--text); }
.adj-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.adj-q { font: inherit; font-size: 12px; letter-spacing: 0; text-transform: uppercase; width: 130px; padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); }
.adj-log > div, .adj-list > div { display: grid; grid-template-columns: 140px minmax(0,1fr) auto auto; gap: 10px; align-items: center;
  font-size: 12px; padding: 5px 2px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.adj-log b, .adj-list b { color: var(--text); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-log i { font-style: normal; color: var(--text-faint); }
.adj-list { max-height: 300px; overflow-y: auto; }
.adj-list > div { grid-template-columns: 110px minmax(0,1fr) 90px 28px; font-family: var(--mono); }
.adj-rm { border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 13px; }
.adj-rm:hover { color: var(--down); }
@media (max-width: 640px) {
  .adj-log > div { grid-template-columns: 1fr auto; }
  .adj-log > div > span:first-child, .adj-log i { display: none; }
  .adj-list > div { grid-template-columns: 1fr auto 24px; }
  .adj-list > div > span:first-of-type { display: none; }
}

/* custom theme */
.thmenu .th-edit { margin-left: auto; font-style: normal; font-size: 11px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px; padding: 1px 6px; }
.thmenu .th-ok + .th-edit, .thmenu .th-edit + .th-ok { margin-left: 6px; }
.ct-base { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--text-dim); }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ct-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; cursor: pointer; }
.ct-row input { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
.ct-row code { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.ct-note { font-size: 12px; color: var(--text-faint); margin: 12px 0; }
.ct-act { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ct-act button:not(.btn-acc) { font: inherit; font-size: 13px; padding: 7px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); cursor: pointer; }
.ct-act .ct-reset { margin-right: auto; }
.adj-tk input::placeholder { text-transform: none; }
/* 10-01e: a clear row to change the custom theme's colours */
.thmenu .th-editrow { color: var(--accent); }
.thmenu .th-pen { width: 42px; text-align: center; font-size: 14px; }

/* 10-01f: the ChartIntels logo - scope ring and rising candles */
.brand-mark, body.desk .brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: url(logo-icon.svg) center / contain no-repeat;
}
body.desk .brand-mark { width: 22px; height: 22px; border-radius: 6px; }
.brand-name .bn-s, .auth-brand .bn-s { color: var(--accent); }
.auth-brand .brand-mark { width: 44px; height: 44px; border-radius: 11px; }
.auth-card .auth-tag { margin: 2px 0 16px 54px; }

/* 10-01g: who is online now (Users & approvals) */
.ua-online { font-size: 13px; color: var(--text-dim); padding: 4px 0 10px; }
.ua-online b { color: var(--up); font-family: var(--mono); font-size: 15px; }
.ua-online span { color: var(--text-faint); font-size: 12px; }
.ua-online button { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.ua-on, .uadm .ua-who .ua-on { color: var(--up); font-size: 11.5px; font-weight: 600; white-space: nowrap; margin-left: 4px; }
.ua-off { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; margin-left: 4px; }

/* 10-01h: user activity report */
#tsModal .tsm-card:has(.ar-tiles) { width: min(1100px, 100%); }
.ar-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; font-size: 12.5px; color: var(--text-dim); }
.ar-bar input, .ar-bar select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface-2); color: var(--text); }
.ar-bar label { display: inline-flex; gap: 6px; align-items: center; }
.ar-csv { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: none; border: 1px solid var(--accent);
  border-radius: 5px; padding: 4px 10px; background: var(--accent-soft); }
.ar-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ar-tiles > div { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--surface-2); }
.ar-tiles b { display: block; font-family: var(--mono); font-size: 18px; color: var(--text); }
.ar-tiles span { font-size: 11.5px; color: var(--text-faint); }
.ar-tiles .warn b { color: var(--down); }
.ar-h { margin: 14px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.ar-h em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.ar-days { display: flex; align-items: flex-end; gap: 3px; height: 90px; overflow-x: auto; padding-bottom: 16px; }
.ar-days > div { position: relative; flex: 1 0 18px; max-width: 46px; height: 100%; display: flex; align-items: flex-end; }
.ar-days i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.ar-days span { position: absolute; bottom: -15px; left: 0; right: 0; text-align: center; font-size: 9.5px; color: var(--text-faint); font-family: var(--mono); }
.ar-tw { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.ar-t { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ar-t th { text-align: right; font-weight: 600; color: var(--text-faint); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 11px; background: var(--surface-2); }
.ar-t td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; color: var(--text-dim); }
.ar-t th:first-child, .ar-t td:first-child { text-align: left; }
.ar-t td b { color: var(--text); }
.ar-t tr[data-u] { cursor: pointer; }
.ar-t tr[data-u]:hover td { background: var(--accent-soft); }
.ar-t .ar-sc { text-align: left; font-family: var(--mono); font-size: 11px; white-space: normal; min-width: 160px; }
.ar-t sub { color: var(--text-faint); font-size: 9px; margin-right: 3px; }
.ar-t .bad, .ar-ev .bad { color: var(--down); font-style: normal; }
.ar-ev { max-height: 260px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.ar-ev > div { display: grid; grid-template-columns: 120px 110px minmax(0,1fr) 120px; gap: 8px; padding: 5px 8px; font-size: 12px;
  border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.ar-ev > div > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-ev b { color: var(--text); }
.ar-ev i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-faint); text-align: right; }
.ar-note { margin-top: 12px; font-size: 11.5px; color: var(--text-faint); }
@media (max-width: 640px) {
  .ar-csv { margin-left: 0; }
  .ar-ev > div { grid-template-columns: 1fr auto; }
  .ar-ev > div > span:first-child, .ar-ev i { display: none; }
}

/* 10-01i: movers sparklines and the hover chart */
.spk-c { width: 112px; padding-top: 3px !important; padding-bottom: 3px !important; }
.spk { display: block; margin-left: auto; overflow: visible; cursor: crosshair; }
.spk-p .spk-l { fill: none; stroke: #5B9CFF; stroke-width: 1.5; stroke-linejoin: round; }
.spk-p .spk-a { fill: rgba(91,156,255,.16); stroke: none; }
.spk-p .spk-dot { fill: #5B9CFF; stroke: var(--surface); stroke-width: 1.5; }
.spk-v rect { opacity: .9; }
.spk-v rect.up { fill: var(--up); }
.spk-v rect.down { fill: var(--down); }
.spk-v rect.flat { fill: #5B9CFF; }
.spk-v rect.on { opacity: 1; stroke: var(--text); stroke-width: .8; }
.spk-none { color: var(--text-faint); }
#spkTip { position: fixed; z-index: 990; pointer-events: none; transform: translate(-50%, calc(-100% - 9px));
  background: var(--surface); border: 1px solid #5B9CFF; border-radius: 6px; padding: 3px 8px; font-family: var(--mono);
  font-size: 11px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.18); white-space: nowrap; text-align: left; }
#spkTip span { display: block; color: var(--text-dim); }
#spkTip b { color: var(--text); font-size: 12px; }
#spkTip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: var(--surface);
  border-right: 1px solid #5B9CFF; border-bottom: 1px solid #5B9CFF; transform: translateX(-50%) rotate(45deg); }
.mini-t { cursor: default; }
#miniPop { position: fixed; z-index: 985; width: 416px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: 7px 8px 6px; }
#miniPop .mp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
#miniPop .mp-h b { font-size: 13.5px; color: var(--text); }
#miniPop .mp-h span { color: var(--text-faint); font-size: 11px; }
#miniPop .mp-s { font-family: var(--mono); font-size: 10px; letter-spacing: -.01em; color: var(--text-faint); margin: 2px 0 4px; }
#miniPop .mp-s b { color: var(--text); font-weight: 600; margin-right: 4px; }
#miniPop .mp-s i { font-style: normal; margin-left: 4px; }
#miniPop canvas { display: block; }
@media (max-width: 640px) { .spk-cv { display: none; } .spk-c { width: 76px; } .spk-c .spk { width: 72px; } }

/* 10-01l: sector editor */
#tsModal .tsm-card:has(.se-wrap) { width: min(980px, 100%); }
.se-wrap { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 14px; min-height: 420px; }
.se-h { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.se-h i { font-style: normal; color: var(--text-dim); }
.se-list { display: flex; flex-direction: column; gap: 2px; max-height: 400px; overflow-y: auto; }
.se-g { display: flex; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left; font: inherit;
  font-size: 13px; padding: 6px 8px; border-radius: 5px; color: var(--text); cursor: pointer; }
.se-g:hover { background: var(--surface-2); }
.se-g.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.se-g i { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.se-add { display: flex; gap: 6px; margin-top: 8px; }
.se-add input, .se-top input, .se-tools input[type=text], #seQ { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--text); }
.se-add button, .se-top button, .se-foot button:not(.btn-acc) { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.se-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.se-top #seName { font-weight: 600; font-size: 14px; }
.se-top .warn { color: var(--down); }
.se-cnt { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.se-cnt b { color: var(--text); font-family: var(--mono); }
.se-tools { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.se-tools label { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.se-miss { font-size: 11.5px; color: var(--down); margin-bottom: 6px; }
.se-scrips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px; align-content: start; }
.se-s { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 5px; border-radius: 4px; cursor: pointer; color: var(--text-dim); }
.se-s b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.se-s em { font-style: normal; font-size: 10px; color: var(--text-faint); }
.se-s span { margin-left: auto; font-size: 10px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70px; }
.se-s.on { background: var(--accent-soft); }
.se-s.on b { color: var(--accent); font-weight: 600; }
.se-s.other b { color: var(--text-faint); }
.se-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.se-note { margin-right: auto; font-size: 11.5px; color: var(--text-faint); }
.btn-acc:disabled { opacity: .45; cursor: default; }
@media (max-width: 700px) { .se-wrap { grid-template-columns: 1fr; } .se-list { max-height: 160px; } .se-foot { flex-wrap: wrap; } }

/* 10-02a: FX mode - forex & crypto */
.mktsw { display: inline-flex; margin-left: 10px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.mktsw button { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; color: var(--text-faint); cursor: pointer; }
.mktsw button.is-on { background: var(--accent); color: var(--accent-ink); }
body[data-market="fx"] .adjseg, body[data-market="fx"] #tradeBox, body[data-market="fx"] .infobtn,
body[data-market="fx"] #infoBtn { display: none !important; }
body[data-market="fx"] .headline .hl { opacity: .55; }
.fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 4px 0 6px; }
.fxc { text-align: left; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.fxc:hover { border-color: var(--accent); }
.fxc.idle { opacity: .7; }
.fxc-h { display: flex; align-items: center; gap: 8px; }
.fxc-h b { font-family: var(--mono); font-size: 14px; }
.fxc-h span { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxc-h i { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.fxc-h i.on { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); }
.fxc-p { font-family: var(--mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 4px; transition: background .6s; }
.fxc-p.fl-up { background: var(--up-soft); } .fxc-p.fl-dn { background: var(--down-soft); }
.fxc-c { font-family: var(--mono); font-size: 12px; color: var(--text-faint); min-height: 16px; }
.fxc-c.up { color: var(--up); } .fxc-c.down { color: var(--down); }
.fx-spark { width: 100%; height: 40px; display: block; margin: 2px 0; }
.fx-spark polyline { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fx-spark.up polyline { stroke: var(--up); } .fx-spark.down polyline { stroke: var(--down); }
.fx-spark.up polygon { fill: var(--up-soft); } .fx-spark.down polygon { fill: var(--down-soft); }
.fx-nospark { height: 40px; margin: 2px 0; border-bottom: 1px dashed var(--line); }
.fxc-f { display: flex; gap: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); flex-wrap: wrap; }
@media (max-width: 640px) { .fxgrid { grid-template-columns: 1fr 1fr; gap: 8px; } .fxc-p { font-size: 18px; } .mktsw button { padding: 3px 8px; } }
body[data-market="fx"] #sideDepth, body[data-market="fx"] .side-depth { display: none !important; }
.fxc { min-width: 0; overflow: hidden; }
@media (max-width: 620px) {
  .mktsw { margin-left: 6px; }
  .mktsw button { display: none; padding: 3px 9px; }
  .mktsw button.is-on { display: inline-block; }
  .mktsw button.is-on::after { content: " \21C4"; font-weight: 400; }
  .fxc { padding: 8px 9px 6px; }
  .fxc-h span { display: none; }
  .fxc-p { font-size: 17px; }
  .fxc-c { font-size: 11px; }
  .fxc-f { font-size: 10px; gap: 6px; }
}
/* phone: the brand row is full, so the DSE | FX switch sits at the left of
   the index line below it */
@media (max-width: 620px) {
  .mktsw { position: absolute; left: 16px; top: 52px; margin: 0; z-index: 2; }
  .mktsw button { font-size: 10.5px; padding: 2px 9px; }
}

/* 10-02b: the Formula Editor window (AmiBroker style) and the one-line Explore bar */
.fxpanel.fxwin { top: 70px; right: auto; bottom: auto; left: 40px; width: 760px; height: 600px; min-width: 420px; min-height: 300px;
  resize: both; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.30); z-index: 760; }
.fxpanel.fxwin.max { left: 8px !important; top: 8px !important; width: calc(100vw - 16px) !important; height: calc(100vh - 16px) !important; resize: none; }
.fxw-title { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); cursor: move; user-select: none; }
.fxw-title b { font-size: 13.5px; }
.fxw-max { margin-left: auto; border: 0; background: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 0 4px; }
.fxw-title .fx-x { margin-left: 0; }
.fxw-tabs { display: flex; gap: 2px; align-items: flex-end; padding: 5px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto;
  background: var(--surface-2); scrollbar-width: thin; flex: none; }
.fxw-tab { display: flex; align-items: center; gap: 4px; padding: 4px 6px 5px 6px; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 7px 7px 0 0; background: var(--surface-2); font-size: 12.5px; cursor: pointer; white-space: nowrap; max-width: 210px; color: var(--text-dim); }
.fxw-tab.on { background: var(--surface); color: var(--text); font-weight: 600; margin-bottom: -1px; padding-bottom: 6px; }
.fxw-tab.off .fxw-nm { opacity: .55; }
.fxw-nm { overflow: hidden; text-overflow: ellipsis; }
.fxw-nm i.bad { color: var(--down); font-style: normal; font-weight: 700; }
.fxw-eye, .fxw-x { border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.fxw-eye { color: var(--accent); font-size: 10px; }
.fxw-x:hover { color: var(--down); }
.fxw-add { border: 1px dashed var(--line); background: none; color: var(--text-dim); border-radius: 6px; padding: 2px 9px; margin: 0 0 4px 4px; cursor: pointer; font-size: 14px; }
.fxwin .fx-body { padding: 8px 10px 8px; display: flex; flex-direction: column; min-height: 0; }
.fxwin .fx-ed { flex: 1; min-height: 0; gap: 6px; }
.fxwin .fx-code { min-height: 120px; }
.fx-tool { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.fx-tool button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px; padding: 4px 9px;
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.fx-tool button:hover { border-color: var(--accent); }
.fx-tool .fx-go { background: var(--accent); color: var(--accent-ink, #191104); border-color: var(--accent); font-weight: 700; }
.fx-tool input, .fx-tool select { font: inherit; font-size: 12.5px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); color: var(--text); }
.fx-tool input { flex: 1; min-width: 90px; }
.fx-tool select { width: 96px; }
.fx-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.fx-status { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-faint); flex-wrap: wrap; }
.fxwin .fx-msg { max-height: 120px; overflow: auto; }
@media (max-width: 760px) {
  .fxpanel.fxwin { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; resize: none; }
  .fxw-max { display: none; }
  .fx-sep { display: none; }
  .fx-hint { display: none; }
}
.fxx-one { flex-wrap: wrap; row-gap: 6px; }
.fxx-one label { white-space: nowrap; }
.fxx-one .fxx-f { max-width: 220px; }
.fxx-one .fxx-n { width: 64px; }
.fxx-one .fxx-run, .fxx-one .fxx-csv, .fxx-one .fxx-codebtn, .fxx-one .fxx-parbtn { align-self: flex-end; }

/* 10-02c  Explore tabs - one exploration per tab, each runs on its own */
.fxx-tabs { padding: 6px 12px 0; background: transparent; }
.fxx .fxx-tabs { background: var(--surface-2); }
.fxx-tabs .fxw-tab { max-width: 230px; }
.fxx-tb { font-size: 11px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 3px; font-weight: 400; }
.fxx-tb b { color: var(--accent); font-weight: 700; }
.fxx-tb:empty { display: none; }
.fxw-tab.run .fxx-tb { color: var(--accent); }
.fxx-spin { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent;
  display: inline-block; animation: fxxspin .8s linear infinite; }
@keyframes fxxspin { to { transform: rotate(360deg); } }
@media (max-width: 620px) { .fxx-tabs { padding: 4px 8px 0; } .fxx-tabs .fxw-tab { max-width: 150px; } }

/* 10-02d  Indicators window - built-in indicators and your own formulas */
.indwin { position: fixed; z-index: 750; top: 80px; left: 40px; width: 720px; height: 540px; min-width: 420px; min-height: 300px;
  resize: both; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.30); }
.indwin[hidden] { display: none; }
.indwin .fx-x { margin-left: auto; }
.iw-search { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.iw-search input { width: 100%; font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); color: var(--text); }
.iw-body { flex: 1; min-height: 0; display: flex; }
.iw-nav { width: 190px; flex: none; border-right: 1px solid var(--line-soft); padding: 6px; overflow-y: auto; background: var(--surface-2); }
.iw-cat { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; border: 0; background: none;
  color: var(--text-dim); font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.iw-cat.sub { padding-left: 20px; font-size: 12.5px; }
.iw-cat:hover { background: var(--surface); color: var(--text); }
.iw-cat.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.iw-cat i { font-style: normal; font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
.iw-list { flex: 1; min-width: 0; overflow-y: auto; padding: 4px 10px 12px; }
.iw-h { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin: 12px 4px 4px; }
.iw-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.iw-row.on { cursor: default; }
.iw-row:hover, .iw-row:focus-visible { background: var(--surface-2); outline: none; }
.iw-row.off .iw-main { opacity: .5; }
.iw-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.iw-main { flex: 1; min-width: 0; display: grid; }
.iw-main b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-main span { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-main em.bad { color: var(--down); font-style: normal; }
.iw-tag { font-size: 10.5px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.iw-on { font-size: 10.5px; color: var(--accent); white-space: nowrap; }
.iw-plus { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--accent); font-size: 17px; opacity: 0; }
.iw-row:hover .iw-plus, .iw-row:focus-visible .iw-plus { opacity: 1; background: var(--accent-soft); }
.iw-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); border-radius: 6px; font: inherit; font-size: 12px;
  padding: 3px 8px; cursor: pointer; }
.iw-btn:hover { color: var(--text); border-color: var(--accent); }
.iw-btn.x:hover, .ghost.x:hover { color: var(--down); border-color: var(--down); }
.iw-btn.eye { color: var(--accent); border: 0; background: none; padding: 0 2px; }
.iw-empty { padding: 24px 8px; color: var(--text-faint); font-size: 13px; }
.iw-act { display: flex; gap: 8px; padding: 10px 4px; }
.iw-set { padding: 8px 4px; max-width: 360px; }
.iw-set .indrow { margin: 6px 0; }
@media (max-width: 760px) {
  .indwin { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; min-width: 0; border-radius: 0; resize: none; z-index: 900; }
  .iw-body { flex-direction: column; }
  .iw-nav { width: auto; display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); flex: none; }
  .iw-cat { width: auto; white-space: nowrap; gap: 6px; }
  .iw-cat.sub { padding-left: 9px; }
  .iw-plus { opacity: 1; }
  .iw-tag { display: none; }
}
.iw-about { margin: -2px 4px 10px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }

/* 10-02f  Formula Editor start page (no tab open) */
.fx-start { padding: 22px 18px; display: grid; gap: 10px; align-content: start; max-width: 560px; }
.fx-start b { font-size: 15px; }
.fx-start p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.fx-start .fx-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-start .fx-btns button, .fx-onchart { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px;
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; }
.fx-start .fx-cap { margin-top: 8px; }
.fx-onchart { text-align: left; background: none; }
.fx-onchart:hover { border-color: var(--accent); }
.fx-onchart i { font-style: normal; font-size: 11px; color: var(--text-faint); margin-left: 6px; }

/* 10-02g  readout caret: the count of price-chart indicators beside it */
.romore { width: auto; min-width: 20px; padding: 0 4px; gap: 3px; }
.romore.on { transform: none; }
.romore .ro-ar { display: inline-block; transition: transform .15s ease; }
.romore.on .ro-ar { transform: rotate(180deg); }
.romore .ro-n { font-size: 9.5px; font-weight: 700; font-family: var(--mono); }
.readout .rv { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
/* the timeframe label keeps one width, so the toolbar never shifts */
#tfLabel { display: inline-block; min-width: 3ch; text-align: center; }

/* 10-02i  the chart toolbar never changes width while a sheet loads:
   the indicator count keeps its place (blank when there is none) and each
   icon slot is its full size before its icon is drawn */
.cbtn .cnum { min-width: 18px; box-sizing: border-box; text-align: center; }
.cbtn .cnum:empty { display: inline-block; visibility: hidden; }
#toolIcon, #ctypeIcon, #layoutIcon { display: inline-block; min-width: 18px; min-height: 18px; }

/* 10-02j  buttons beside each indicator's name on the chart */
.fxctl-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fxctl { position: absolute; display: inline-flex; gap: 2px; pointer-events: auto; opacity: .85; transition: opacity .12s; }
.fxctl:hover { opacity: 1; }
.fxctl[hidden] { display: none; }
.fxctl button { border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); background: var(--surface); color: var(--text); border-radius: 4px;
  font: 600 9.5px/1 var(--mono); height: 13px; min-width: 17px; padding: 0 2px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.fxctl button svg { width: 10px; height: 10px; display: block; }
.fxctl button:hover { color: var(--text); border-color: var(--accent); }
.fxctl button[data-a="rm"]:hover { color: var(--down); border-color: var(--down); }
@media (hover: none) { .fxctl { opacity: 1; } .fxctl button { min-width: 20px; } }

/* 10-02k  premium indicators */
.iw-star { color: #d4a017; }
.iw-row.locked { opacity: .6; cursor: not-allowed; }
.iw-lock { font-size: 12px; }
.pm-card { width: min(980px, 100%); }
.pm-form { display: grid; gap: 10px; }
.pm-form label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.pm-form input:not([type=checkbox]), .pm-form select { font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text); }
.pm-row { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; align-items: end; }
.pm-form label.pm-on { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.pm-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pm-ver { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }
.pm-ed.afe { height: 420px; }
.pm-act { display: flex; gap: 10px; align-items: center; }
@media (max-width: 640px) { .pm-row { grid-template-columns: 1fr; } .pm-ed.afe { height: 300px; } }

/* ============================== AFL / Pine Script language switch (pine) */
.lang-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 12px; background: var(--surface-2); flex: none; }
.lang-seg button { border: 0; background: none; padding: 3px 10px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text-dim); cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center; }
.lang-seg button + button { border-left: 1px solid var(--line); }
.lang-seg button:hover { color: var(--text); }
.lang-seg button.on { background: var(--accent); color: #fff; }
.lang-seg .lg { font: 700 9px/1 var(--mono); border: 1px solid currentColor; border-radius: 4px; padding: 2px 3px; opacity: .9; }
@media (max-width: 620px) { .lang-seg .lt { display: none; } .lang-seg button { padding: 3px 7px; } }
.st { font-size: 10.5px; border-radius: 10px; padding: 1px 8px; white-space: nowrap; font-weight: 600; }
.st.ok { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); }
.st.soon { background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--line); }
.cov-row { display: grid; grid-template-columns: 1fr auto 120px; gap: 2px 12px; align-items: center; padding: 6px 8px; border-radius: 7px; font-size: 12.5px; }
.cov-row.click { cursor: pointer; }
.cov-row.click:hover { background: var(--surface-2); }
.cov-name { font-weight: 600; }
.cov-n { font: 11px var(--mono); color: var(--text-faint); text-align: right; }
.cov-row small { grid-column: 1 / -1; color: var(--text-faint); font-size: 11px; }
.cov-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px 10px 16px; }
.cov-list code { font: 11px var(--mono); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px; }
.iw-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* settings tabs: Inputs / Style / Visibility */
.iw-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 4px 0 10px; }
.iw-tab { border: 0; background: none; padding: 6px 0; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.iw-tab.on { color: var(--text); border-bottom-color: var(--text); }
.iw-lang { font: 700 9px/1 var(--mono); border: 1px solid currentColor; border-radius: 4px; padding: 2px 4px; color: var(--accent); vertical-align: middle; margin-left: 6px; }
.sty-item { padding: 6px 2px 8px; border-bottom: 1px solid var(--line-soft); }
.sty-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sty-head input { width: 16px; height: 16px; accent-color: var(--text); }
.sty-body { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0 0 24px; }
.sty-c, .sty-w { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.sty-c input[type=color] { width: 32px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }
.sty-c input[type=number] { width: 52px; }
.sty-c i { font-style: normal; color: var(--text-faint); margin-left: -4px; }

/* 10-03g: the Backtest window - AmiBroker-style, with report tabs */
.btwin { width: 860px; height: 600px; min-width: 460px; }
.bt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.bt-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.bt-pick select { font: inherit; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; max-width: 320px; }
.bt-bar .fx-go { font: inherit; font-weight: 600; font-size: 13px; padding: 5px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.bt-bar .fx-go:disabled { opacity: .6; cursor: progress; }
.bt-stat { font-size: 12px; color: var(--text-dim); flex: 1; min-width: 160px; }
.bt-stat code { font-family: var(--mono); }
.bt-tabs { padding: 0 12px; }
.bt-tabs .iw-tab i { font-style: normal; font-size: 11px; color: var(--text-faint); margin-left: 3px; }
.bt-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 16px; }
.bt-err { color: var(--text); text-align: left; line-height: 1.55; }
.bt-err code { font-family: var(--mono); background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.bt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bt-card { border: 1px solid var(--line-soft); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.bt-card span { font-size: 11.5px; color: var(--text-dim); }
.bt-card b { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--text); }
.bt-card small { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
.bt-body .up { color: var(--up); } .bt-body .down { color: var(--down); }
.bt-eq { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 6px 4px; }
.bt-eq canvas { display: block; }
.bt-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-dim); padding: 4px 6px 2px; align-items: center; }
.bt-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: -8px; }
.bt-legend .l-eq { background: var(--accent); } .bt-legend .l-bh { background: var(--text-faint); } .bt-legend .l-dd { background: var(--down); opacity: .5; height: 8px; }
.bt-used { font-size: 12px; color: var(--text-dim); margin: 10px 2px 4px; }
.bt-notes { margin: 6px 0 0 18px; padding: 0; font-size: 12px; color: var(--text-dim); }
.bt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bt-table th, .bt-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.bt-table th:first-child, .bt-table td:first-child { text-align: left; }
.bt-table td { font-family: var(--mono); }
.bt-perf tbody th { font-weight: 500; color: var(--text-dim); text-align: left; }
.bt-perf td[colspan] { text-align: left; }
.bt-perf .bt-sep tr:first-child th { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line); padding-top: 14px; }
.bt-trades thead th { position: sticky; top: -12px; background: var(--surface); color: var(--text-dim); font-weight: 600; z-index: 1; }
.bt-trades td small { display: block; font-family: inherit; font-size: 10.5px; color: var(--text-faint); }
.bt-trades tbody tr { cursor: pointer; }
.bt-trades tbody tr:hover, .bt-trades tbody tr.on { background: var(--accent-soft); }
.bt-trades tr.open td { font-style: italic; }
.bt-set .bt-two { display: inline-flex; gap: 6px; }
.bt-set .bt-two input { width: 110px; }
.bt-set .indrow.off { opacity: .55; }
@media (max-width: 760px) { .btwin { inset: 0; width: auto; height: auto; border-radius: 0; resize: none; } .bt-table { font-size: 11.5px; } }

/* 10-03j: My profile and the admin dashboard */
.pf-chip { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px;
  border: 1px solid currentColor; vertical-align: 1px; }
.pf-chip.pf-basic { color: var(--text-dim); } .pf-chip.pf-pro { color: #3F74F5; } .pf-chip.pf-full { color: #C98A10; } .pf-chip.pf-admin { color: #9B59D0; }
.tsm-card.pf-card { width: min(980px, 100%); height: min(720px, 92vh); }
.pf-card .tsm-body { padding: 0; display: flex; min-height: 0; flex: 1; }
.pf-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.pf-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.pf-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 19px; color: #fff; flex: none;
  background: linear-gradient(135deg, #6b7280, #374151); }
.pf-av.pf-pro { background: linear-gradient(135deg, #5B8DEF, #2E5BD8); } .pf-av.pf-full { background: linear-gradient(135deg, #E8B33E, #B7790F); }
.pf-av.pf-admin { background: linear-gradient(135deg, #B07CE0, #7C3FB8); }
.pf-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-id b { font-size: 18px; } .pf-id span { font-size: 12.5px; color: var(--text-dim); }
.pf-badges { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pf-badges .pf-chip { font-size: 12px; padding: 3px 10px; }
.pf-acc { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.pf-acc.warn { color: var(--down); font-weight: 600; }
.pf-main { display: flex; flex: 1; min-height: 0; }
.pf-nav { width: 190px; flex: none; border-right: 1px solid var(--line-soft); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); }
.pf-nav button { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 7px; font: inherit; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.pf-nav button:hover { background: var(--surface); color: var(--text); }
.pf-nav button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.pf-body { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px 22px; }
.pf-h { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: 18px 0 8px; }
.pf-h:first-child { margin-top: 0; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pf-stat { border: 1px solid var(--line-soft); background: var(--surface-2); border-radius: 9px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.pf-stat span { font-size: 11.5px; color: var(--text-dim); }
.pf-stat b { font-size: 17px; font-weight: 650; }
.pf-stat small { font-size: 11px; color: var(--text-faint); }
.pf-stat.good { border-color: color-mix(in srgb, var(--up) 45%, transparent); } .pf-stat.good b { color: var(--up); }
.pf-stat.bad { border-color: color-mix(in srgb, var(--down) 45%, transparent); } .pf-stat.bad b { color: var(--down); }
.pf-stat.warn { border-color: color-mix(in srgb, #E8A33E 55%, transparent); }
.pf-tops { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-top { font: inherit; font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.pf-top:hover { border-color: var(--accent); color: var(--accent); }
.pf-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pf-plan { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; background: var(--surface); position: relative; }
.pf-plan.mine { border-width: 2px; }
.pf-plan.pf-basic.mine { border-color: var(--text-dim); } .pf-plan.pf-pro.mine { border-color: #3F74F5; } .pf-plan.pf-full.mine { border-color: #C98A10; }
.pf-plan-h { display: flex; align-items: center; justify-content: space-between; }
.pf-plan-h b { font-size: 15px; } .pf-plan-h i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); }
.pf-plan-n { font-size: 22px; font-weight: 700; margin: 4px 0; } .pf-plan-n small { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.pf-plan p { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.pf-note { font-size: 12px; color: var(--text-dim); margin: 12px 0 0; } .pf-note.bad { color: var(--down); }
.pf-lead { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; }
.pf-tablewrap { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pf-table th, .pf-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.pf-table thead th { position: sticky; top: -16px; background: var(--surface); z-index: 1; font-size: 12px; color: var(--text-dim); }
.pf-table td b { display: block; font-weight: 600; } .pf-table td small { color: var(--text-faint); font-size: 11.5px; }
.pf-table .pf-g th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 6px 8px; }
.pf-table .pf-c { text-align: center; width: 64px; }
.pf-table .pf-c.cur { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pf-table thead .pf-c.cur { color: var(--accent); }
.pf-table .pf-c.you { width: 92px; background: color-mix(in srgb, var(--up) 7%, transparent); font-weight: 600; }
.pf-table tr.not td:first-child b { color: var(--text-dim); font-weight: 500; }
.pf-y { color: var(--up); font-weight: 700; } .pf-n { color: var(--text-faint); }
.pf-ov { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: #C98A10; }
.pf-devs { display: flex; flex-direction: column; gap: 6px; }
.pf-dev { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 12px; }
.pf-dev.cur { border-color: var(--accent); }
.pf-dev b { font-size: 13px; } .pf-dev b i { font-style: normal; font-size: 11px; color: var(--accent); margin-left: 6px; }
.pf-dev small { display: block; font-size: 11.5px; color: var(--text-faint); }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; } .pf-dot.on { background: var(--up); }
.pf-more { font-size: 12px; color: var(--text-faint); padding: 2px 4px; }
.pf-act { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pf-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.pf-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.pf-form input { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); }
.pf-form input:disabled { opacity: .6; }
.pf-form .pf-act { grid-column: 1 / -1; margin-top: 0; }
.pf-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pf-th { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.pf-th.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pf-th.lock { opacity: .45; cursor: not-allowed; }
.pf-sw { display: flex; gap: 0; border-radius: 5px; overflow: hidden; border: 1px solid var(--line-soft); }
.pf-sw i { width: 22px; height: 16px; }
.pf-planbar { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.pf-pb { display: flex; width: 180px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line-soft); }
.pf-pb i.pf-basic { background: #9CA3AF; } .pf-pb i.pf-pro { background: #3F74F5; } .pf-pb i.pf-full { background: #C98A10; }
.pf-basict { color: var(--text-dim); } .pf-prot { color: #3F74F5; } .pf-fullt { color: #C98A10; }
.pf-list { font-size: 12.5px; margin-top: 8px; color: var(--text); } .pf-list small { color: var(--text-faint); }
.pf-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pf-tools button { text-align: left; font: inherit; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.pf-tools button:hover { border-color: var(--accent); }
.pf-tools b { font-size: 13px; } .pf-tools small { font-size: 11.5px; color: var(--text-faint); }
@media (max-width: 760px) {
  .tsm-card.pf-card { height: 100vh; max-height: 100vh; border-radius: 0; }
  .pf-main { flex-direction: column; }
  .pf-nav { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 6px; }
  .pf-nav button { white-space: nowrap; }
  .pf-nav button.on { box-shadow: inset 0 -2px 0 var(--accent); }
  .pf-plans { grid-template-columns: 1fr; }
  .pf-badges { margin-left: 0; align-items: flex-start; }
}

/* 10-03n: settings written with the same inline = "..." share one row */
.iw-inline { display: inline-flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-end; min-width: 0; }
.iw-inline > select, .iw-inline > input[type="text"], .iw-inline > input[type="number"] { min-width: 0; flex: 1 1 auto; }
.iw-inline > input[type="color"] { flex: none; }
.iw-set .iw-h.iw-sec { margin-top: 14px; }
.iw-set .iw-h.iw-sec:first-of-type { margin-top: 4px; }

/* 10-04a: the legend buttons beside a formula's name, TradingView style */
.fxctl button { height: 15px; min-width: 15px; padding: 0 1px; border-radius: 3px;
  border-color: transparent; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.fxctl button svg { width: 11px; height: 11px; }
.fxctl { gap: 1px; opacity: .7; }
.fxctl:hover { opacity: 1; }
.fxctl:hover button { border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.fxctl button:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }
.fxctl.is-off { opacity: .55; }
.fxctl-menu { display: flex; flex-direction: column; gap: 1px; }
.fxctl-menu button { text-align: left; border: 0; background: none; font: inherit; font-size: 12.5px;
  padding: 6px 9px; border-radius: 6px; color: var(--text); cursor: pointer; }
.fxctl-menu button:hover { background: var(--surface-2); }
.fxctl-menu button.x:hover { color: var(--down); }

/* 10-04a: save-my-chart button and the full-screen chart */
#tplBtn.ws-dirty { color: var(--accent); }
#tplBtn.ws-dirty::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
#tplBtn { position: relative; }
.ws-note { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; line-height: 1.5; }
.ws-warn { color: var(--accent); }
body.chart-max .topbar, body.chart-max .tabbar, body.chart-max #liveLine,
body.chart-max .idrawer, body.chart-max .cside, body.chart-max .sideicons,
body.chart-max .sidepanel, body.chart-max #sideRail { display: none !important; }
body.chart-max { overflow: hidden; }
body.chart-max .view#view-chart { position: fixed; inset: 0; z-index: 400; margin: 0; padding: 0; max-width: none; background: var(--bg); }
body.chart-max .cdesk { height: 100vh; max-height: 100vh; }
body.chart-max.desk.chart-fit .cdesk,
body.chart-max.desk.chart-fit.side-closed .cdesk { grid-template-columns: 42px minmax(0, 1fr) 0 0; }
body.chart-max .cmain { height: 100vh; max-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; }

/* 10-04b: the profile picture - chip, menu and the profile window */
.ub-av.has-img, .pf-av.has-img { background: var(--surface-2); padding: 0; overflow: hidden; }
.ub-av img, .pf-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.usermenu .um-who { grid-template-columns: 36px 1fr; column-gap: 9px; align-items: center; }
.usermenu .um-who .um-av { grid-row: 1 / -1; grid-column: 1; width: 36px; height: 36px; font-size: 15px; }
.usermenu .um-who b, .usermenu .um-who span { grid-column: 2; }
.pf-avbtn { position: relative; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700;
  font-size: 19px; color: #fff; overflow: visible; }
.pf-avbtn .pf-avcam { position: absolute; right: -2px; bottom: -2px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--line); opacity: 0; transition: opacity .12s; }
.pf-avbtn:hover .pf-avcam, .pf-avbtn:focus-visible .pf-avcam { opacity: 1; }
.pf-avlinks { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.pf-avlinks button { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px;
  color: var(--accent); cursor: pointer; }
.pf-avlinks button:hover { text-decoration: underline; }
.pf-avlinks i { font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.pf-avlinks i.bad { color: var(--down); }
.uadm .ua-av { width: 30px; height: 30px; font-size: 13px; flex: none; align-self: flex-start; margin-top: 2px; }
.uadm .ua-who { flex: 1 1 220px; min-width: 0; }

/* 10-04a: the save and full-screen icons need a size of their own */
#wsBtn, #fsBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; }
#wsBtn svg, #fsBtn svg { width: 16px; height: 16px; flex: none; display: block; }

/* 10-04d: the legend at TradingView size, a bigger caret, one header height */
body.desk { margin: 0; }
.fxctl { gap: 0; opacity: .8; }
.fxctl button { height: 22px; min-width: 24px; padding: 0 3px; border-radius: 5px; border-color: transparent;
  background: transparent; color: var(--text-dim); }
.fxctl button svg { width: 17px; height: 17px; stroke-width: 1.5; }
.fxctl:hover button { border-color: transparent; }
.fxctl button:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.fxctl button[data-a="rm"]:hover { color: var(--down); border-color: transparent; }
.fxctl.is-off { opacity: .6; }
@media (hover: none) { .fxctl button { min-width: 28px; height: 26px; } }
.romore { height: 24px; min-width: 30px; padding: 0 6px; gap: 4px; }
.romore .ro-ar { font-size: 15px; line-height: 1; }
.romore .ro-n { font-size: 12px; }

/* 10-04e: only the eye stays; the other buttons come with the cursor */
.fxctl button:not([data-a="eye"]) { visibility: hidden; opacity: 0; transition: opacity .12s; }
.fxctl.hot button:not([data-a="eye"]), .fxctl:hover button:not([data-a="eye"]) { visibility: visible; opacity: 1; }
.fxctl { opacity: 1; }
.fxctl button[data-a="eye"] { color: var(--text-dim); }
.fxctl.is-off button[data-a="eye"] { color: var(--text-faint); }
@media (hover: none) { .fxctl button:not([data-a="eye"]) { visibility: visible; opacity: 1; } }

/* 10-05a: chart templates and layouts */
.indpop.tpl-pop { width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow: auto; }
.tpl-tabs { display: flex; margin-bottom: 8px; }
.tpl-tabs button { flex: 1; }
.tpl-new { display: flex; gap: 6px; margin: 6px 0 4px; }
.tpl-new input, .tpl-ren { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--text); }
.tpl-new input.bad, .tpl-ren.bad { border-color: var(--down); }
.tpl-new input:focus, .tpl-ren:focus { outline: 0; border-color: var(--accent); }
.tpl-list { display: grid; gap: 6px; margin: 8px 0; }
.tpl-empty { font-size: 12.5px; color: var(--text-dim); padding: 10px 4px; line-height: 1.5; }
.tpl-row { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 9px; display: grid; gap: 6px; background: var(--surface); }
.tpl-main { display: grid; gap: 1px; min-width: 0; }
.tpl-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-main span { font-size: 11.5px; color: var(--text-faint); }
.tpl-lock { font-style: normal; font-size: 11.5px; color: var(--accent); }
.tpl-act { display: flex; gap: 4px; flex-wrap: wrap; }
.tpl-act button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 6px;
  font: inherit; font-size: 12px; padding: 4px 9px; cursor: pointer; }
.tpl-act button:hover { border-color: var(--accent); }
.tpl-act button.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #191104); font-weight: 600; }
.tpl-act button.x:hover { color: var(--down); border-color: var(--down); }
.tpl-skip { display: grid; gap: 6px; margin: 8px 0; }
.tpl-skip div { display: grid; gap: 1px; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 7px; }
.tpl-skip b { font-size: 13px; }
.tpl-skip span { font-size: 12px; color: var(--text-dim); }
#tplBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; }
#tplBtn svg { width: 16px; height: 16px; display: block; }
.tpl-status { font-size: 12.5px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; margin: 6px 0 8px; background: var(--surface); }
.tpl-status.dirty { border-color: var(--accent); }
.tpl-my { margin-bottom: 8px; }