:root {
  --bg: #07090b;
  --panel: #0d1014;
  --panel-2: #12161b;
  --line: #1e242b;
  --grid: #141920;
  --grid-2: #1d242c;
  --text: #e6e6e1;
  --text-2: #a2a39b;
  --muted: #6a6c68;
  --accent: #f0b90b;
  --up: #3fae3f;
  --down: #e66767;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 13px/1.35 system-ui, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button { font: inherit; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 8px; cursor: pointer; }
button:hover { color: var(--text); border-color: #2f3842; }
button.on { color: #000; background: var(--accent); border-color: var(--accent); }

/* ---------- topo ---------- */
#top { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font: 700 14px var(--mono); letter-spacing: .08em; color: var(--accent); white-space: nowrap; }
.brand span { color: var(--text-2); margin-left: 6px; font-weight: 500; }
.brand small { color: var(--text-2); margin-left: 8px; font-size: 10px; font-weight: 500; letter-spacing: 0; opacity: .75; }
#cmdWrap { position: relative; flex: 1; max-width: 640px; }
#cmd { width: 100%; height: 32px; padding: 0 10px; background: #000; color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; font: 13px var(--mono); outline: none; }
#cmd:focus { border-color: var(--accent); }
#msg { position: absolute; left: 2px; top: 34px; font-size: 11px; color: var(--text-2); white-space: nowrap; pointer-events: none; z-index: 5; }
#msg.err { color: var(--down); }
#sugest { position: absolute; z-index: 30; left: 0; right: 0; top: 34px; margin: 0; padding: 4px 0; list-style: none;
  background: var(--panel-2); border: 1px solid #2a323b; border-radius: 4px; max-height: 360px; overflow: auto;
  box-shadow: 0 8px 24px #000a; }
#sugest li { display: flex; gap: 10px; padding: 4px 10px; cursor: pointer; align-items: baseline; }
#sugest li.sel, #sugest li:hover { background: #1c232b; }
#sugest .k { font-family: var(--mono); color: var(--accent); min-width: 84px; }
#sugest .g { margin-left: auto; color: var(--muted); font-size: 11px; }
#sugest .ativo { color: var(--up); font-size: 11px; }
#ranges { display: flex; gap: 2px; }
#ranges button { padding: 3px 7px; font: 11px var(--mono); }

/* ---------- corpo ---------- */
#body { display: flex; height: calc(100% - 48px); }
#side { width: 290px; min-width: 200px; max-width: 560px; resize: horizontal; flex: none; overflow: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 6px 0 12px; }
#side.fechado { display: none; }
#side h4 { margin: 10px 12px 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#side label { display: flex; align-items: center; gap: 7px; padding: 2px 12px; cursor: pointer; }
#side label:hover { background: var(--panel-2); }
#side input { accent-color: var(--accent); margin: 0; }
#side .k { font: 11px var(--mono); color: var(--accent); min-width: 62px; }
#side .n { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#side .rod { margin: 14px 12px 0; font-size: 11px; color: var(--muted); }

#main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
#stack { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
#lanes, #axis { display: block; width: 100%; flex: none; }
#axis { height: 46px; border-top: 1px solid var(--line); }
#lanes { border-top: 1px solid var(--line); }

.pane { position: relative; display: flex; flex-direction: column; min-height: 110px; flex-basis: 0; }
.phead { min-height: 26px; flex: none; flex-wrap: wrap; row-gap: 2px; display: flex; align-items: center; gap: 6px; padding: 0 6px;
  background: var(--panel); border-bottom: 1px solid var(--grid); border-top: 1px solid var(--line); cursor: grab; user-select: none; }
.phead:active { cursor: grabbing; }
.grip { color: var(--muted); font-size: 14px; }
.pnum { font: 11px var(--mono); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; min-width: 0; padding: 2px 0; }
.chip { display: flex; align-items: center; gap: 5px; padding: 1px 4px 1px 6px; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; cursor: grab; font-size: 12px; }
.chip .sw { width: 10px; height: 3px; border-radius: 2px; }
.chip .nm { color: var(--text); }
.chip .vl { font: 12px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; min-width: 40px; }
.chip .un { color: var(--muted); font-size: 11px; }
.chip .sd, .chip .x, .pbtn { border: 0; background: none; padding: 0 3px; font: 10px var(--mono); color: var(--muted); }
.chip .sd:hover, .chip .x:hover, .pbtn:hover { color: var(--accent); }
.pbtn.on { color: var(--accent); background: none; }
.pane canvas { flex: 1; min-height: 0; width: 100%; display: block; cursor: crosshair; }
.split { height: 5px; flex: none; cursor: row-resize; background: transparent; margin: -2px 0; position: relative; z-index: 2; }
.split:hover { background: #f0b90b33; }

#dropInd { position: absolute; pointer-events: none; z-index: 20; }
#dropInd.linha { height: 3px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
#dropInd.caixa { border: 2px dashed var(--accent); background: #f0b90b14; display: flex; align-items: center; justify-content: center;
  font: 600 13px var(--mono); color: var(--accent); }

#tip { position: absolute; z-index: 25; pointer-events: none; max-width: 340px; padding: 7px 9px; font-size: 12px;
  background: #0f1318f2; border: 1px solid #2a323b; border-radius: 4px; box-shadow: 0 6px 18px #000c; }
#tip b { color: var(--text); }
#tip .d { font-family: var(--mono); color: var(--text-2); font-size: 11px; }
#tip .i { color: var(--text-2); margin-top: 3px; }
#tip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
#vazio { position: absolute; inset: 0 0 46px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
#vazio b { color: var(--accent); font-family: var(--mono); }

/* ---------- ajuda ---------- */
#help { position: fixed; inset: 0; background: #000b; z-index: 50; display: flex; align-items: center; justify-content: center; }
#help .card { width: min(920px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow: auto; background: var(--panel);
  border: 1px solid #2a323b; border-radius: 6px; padding: 18px 22px; }
#help h2 { margin: 0 0 10px; font-size: 16px; color: var(--accent); }
#help h3 { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
#help table { width: 100%; border-collapse: collapse; font-size: 12px; }
#help td, #help th { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
#help th { color: var(--muted); font-weight: 500; }
#help code { font-family: var(--mono); color: var(--accent); }
#help .al { font-family: var(--mono); color: var(--muted); font-size: 11px; }
#help ul { margin: 4px 0; padding-left: 18px; color: var(--text-2); }

@media (max-width: 760px) {
  #side { display: none; }
  #ranges, .brand span { display: none; }
}
#side h4 { margin-top: 14px; color: var(--accent); }
#side h5 { margin: 6px 12px 2px; font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.pbtn.yz { font-size: 11px; }
#lnkCalc { color: var(--text-2); text-decoration: none; font-size: 12px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); white-space: nowrap; }
#lnkCalc:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- candles e indicadores ---------- */
.chip .cd { border: 0; background: none; padding: 0 3px; font-size: 12px; color: var(--muted); }
.chip .cd:hover, .chip .cd.on { color: var(--accent); }
.ichip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 3px 1px 5px; border-radius: 3px; border: 1px dashed var(--line); white-space: nowrap;
  font: 11px var(--mono); color: var(--text-2); cursor: pointer; }
.ichip:hover .in { color: var(--accent); }
.ichip .sw { width: 10px; height: 3px; border-radius: 2px; }
.ichip .iv { color: var(--text); font-variant-numeric: tabular-nums; }
.ichip.off { opacity: .45; }
.ichip button { border: 0; background: none; padding: 0 2px; font: 10px var(--mono); color: var(--muted); }
.ichip button:hover { color: var(--accent); }
.indbar { display: flex; gap: 1px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--line); }
.pbtn.ib { font-size: 10px; padding: 0 4px; color: var(--text-2); }
.pop { position: fixed; z-index: 60; background: var(--panel-2); border: 1px solid #2f3842; border-radius: 6px;
  box-shadow: 0 10px 28px #000c; padding: 10px 12px; font-size: 12px; min-width: 220px; }
.pop .t { display: flex; align-items: center; gap: 7px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.pop .t .sw, #menuInd .sw { width: 12px; height: 4px; border-radius: 2px; display: inline-block; }
.pop .t .de { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 11px; }
.pop label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 5px 0; color: var(--text-2); }
.pop input[type=number] { width: 74px; background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; font: 12px var(--mono); }
.pop input[type=color] { width: 44px; height: 22px; padding: 0; border: 1px solid var(--line); background: none; }
.pop label.ck { justify-content: flex-start; }
.pop .bt { display: flex; justify-content: space-between; margin-top: 10px; }
#menuInd { padding: 6px; min-width: 180px; }
#menuInd button { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: 0; background: none; padding: 4px 6px; color: var(--text); }
#menuInd button:hover { background: #1c232b; }
#side label.sub { padding-left: 32px; font-size: 11px; color: var(--text-2); }
#side .estnota { color: var(--muted); font-size: 10px; margin: -2px 12px 4px; }
#side .grau { margin-left: auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
#side .grau input { width: 34px; margin-left: 3px; padding: 1px 2px; background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 3px; font: 11px var(--mono); }
#side .grau input:focus { border-color: var(--accent); outline: none; }

/* catálogo em árvore (pastas, como no explorador de arquivos) */
#side .arv-barra { display: flex; gap: 4px; padding: 2px 8px 8px; position: sticky; top: -6px; background: var(--panel); z-index: 1; }
#side .arv-barra input { flex: 1; min-width: 0; padding: 3px 6px; background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 3px; font: 11px var(--mono); }
#side .arv-barra input:focus { border-color: var(--accent); outline: none; }
#side .arv-barra button { background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; cursor: pointer; font-size: 13px; line-height: 20px; }
#side .arv-barra button:hover { color: var(--text); border-color: var(--accent); }
#side .pasta > .pt { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; cursor: pointer; user-select: none; white-space: nowrap; }
#side .pasta > .pt:hover { background: var(--panel-2); }
#side .pt .seta { width: 10px; flex: none; color: var(--muted); font-size: 9px; text-align: center; }
#side .pt .seta::before { content: '\25B8'; }
#side .pasta.aberta > .pt .seta::before { content: '\25BE'; }
#side .pt svg { width: 14px; height: 14px; flex: none; fill: #c9a03c; stroke: #8a6a1f; stroke-width: .6; }
#side .pt svg.fa, #side .pasta.aberta > .pt svg.fe { display: none; }
#side .pasta.aberta > .pt svg.fa { display: block; }
#side .pt .pn { color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
#side .pasta.n0 > .pt .pn { font-weight: 600; letter-spacing: .02em; color: var(--accent); }
#side .pt .cnt { margin-left: auto; color: var(--muted); font: 10px var(--mono); }
#side .pasta.ativa > .pt .cnt::before { content: '\25CF  '; color: var(--accent); }
#side .pasta > .pc { display: none; margin-left: 8px; padding-left: 4px; border-left: 1px solid var(--line); }
#side .pasta.aberta > .pc, #side.filtrando .pasta > .pc { display: block; }
#side.filtrando .pasta > .pt .seta::before { content: '\25BE'; }
#side.filtrando .pasta > .pt svg.fe { display: none; }
#side.filtrando .pasta > .pt svg.fa { display: block; }
#side .pc label.it { padding: 2px 8px 2px 14px; }
#side .pc label.sub { padding-left: 38px; }
#side label.sub[data-filtro="x"] { display: none; }
#side .pc .estnota { margin: 2px 8px 4px 18px; }
#side [hidden] { display: none !important; }

/* controle de ajuste da régua (botão direito na escala) */
#ajEd { min-width: 260px; }
#ajEd .t .de { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
#ajEd .t .de .sw { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
#ajEd .setas { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; justify-content: center; margin: 4px 0 8px; }
#ajEd .setas button, #ajEd .bt button { background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 4px; height: 28px; cursor: pointer; font: 12px var(--mono); }
#ajEd .setas button:hover, #ajEd .bt button:hover { border-color: var(--accent); color: var(--accent); }
#ajEd .bt button { padding: 0 10px; height: 24px; }
#ajEd .bt button.on { border-color: var(--accent); color: var(--accent); }
#ajEd .vals { font: 11px var(--mono); color: var(--text-2); line-height: 1.6; }
#ajEd .vals b { color: var(--text); font-weight: 600; }
#ajEd .ajuda { color: var(--muted); font-size: 10.5px; line-height: 1.5; margin-top: 6px; }
#ajEd .t, #indEd .t { cursor: move; user-select: none; }
#ajEd .campos label { margin: 4px 0; font-size: 11.5px; }
#ajEd .campos input { width: 78px; text-align: right; }
#ajEd .campos span { color: var(--muted); font-size: 11px; white-space: nowrap; }
#ajEd .anos { color: var(--muted); font: 10.5px var(--mono); text-align: right; margin: -3px 0 2px; min-height: 0; }
#ajEd .sync { width: 100%; margin: 8px 0 2px; background: #000; color: var(--text); border: 1px solid var(--line); border-radius: 4px; height: 26px; cursor: pointer; font-size: 11.5px; }
#ajEd .sync:hover { border-color: var(--accent); color: var(--accent); }
#cmd.pensando { border-color: var(--accent); animation: pensa 1.2s ease-in-out infinite; }
@keyframes pensa { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { #cmd.pensando { animation: none; } }
#btnLink { display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
#btnLink svg { display: block; }