:root {
  color-scheme: dark;
  --bg: #000;
  --surface: #141414;
  --border: #262626;
  --text: #dbdbdb;
  --subtle: #a3a3a3;
  --accent: #729dff;
  --hover: #1f1f1f;
  --active: #303030;
  --field: #141414;
  --up-text: #22ab94;
  --down-text: #f7525f;
  --grid: #202020;
  --axis: #b8b8b8;
  --crosshair: #757575;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root.light {
  color-scheme: light;
  --bg: #fff;
  --surface: #fff;
  --border: #e8e8e8;
  --text: #0f0f0f;
  --subtle: #5c5c5c;
  --accent: #2455df;
  --hover: #f2f2f2;
  --active: #e8e8e8;
  --field: #fff;
  --up-text: #087b68;
  --down-text: #c82c39;
  --grid: #e0e0e0;
  --axis: #424242;
  --crosshair: #707070;
}
* { box-sizing: border-box; }
[hidden], [data-inactive-controls] { display: none !important; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; color: var(--text); background: var(--bg); }
.topbar, .panel-title, .feed, .actions, .workspace-actions { display: flex; align-items: center; gap: 8px; }
.topbar { flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 15px; white-space: nowrap; }
.workspace-actions { margin-left: auto; }
.ea-view { flex: 1; min-width: 0; overflow: auto; padding: 14px clamp(10px, 3vw, 36px) 24px; }
.ea-view h3 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ea-group { margin: 10px 0; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.ea-group-header, .ea-detail-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ea-group-header .error { font-size: 12px; }
.ea-table-wrap { margin-top: 6px; overflow: auto; }
.ea-view table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ea-view :is(th, td) { text-align: left; border-bottom: 1px solid var(--border); padding: 6px 8px; }
.ea-view th { font-weight: 500; color: var(--subtle); }
.ea-view tr:last-child td { border-bottom: 0; }
button.ea-link.secondary { color: var(--accent); }
button.ea-control.secondary { color: var(--down-text); }
#ea-detail-controls { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ea-comment { display: block; min-width: 10ch; max-width: 36ch; white-space: pre-wrap; overflow-wrap: anywhere; }
#ea-action-result:empty, #ea-control-note:empty { display: none; }
#ea-action-dialog { padding: 18px; width: min(430px, calc(100% - 26px)); }
#ea-action-dialog p { font-size: 13px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
#ea-action-dialog .actions { justify-content: flex-end; }
.ea-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.ea-metrics div { flex: 1 1 110px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; }
.ea-metrics dt { color: var(--subtle); font-size: 12px; }
.ea-metrics dd { margin: 2px 0 0; font: 600 17px ui-monospace, monospace; }
.ea-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ea-calendar > span { padding: 3px; color: var(--subtle); text-align: center; font-size: 12px; }
.ea-calendar .ea-day { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 58px;
  padding: clamp(3px, 1vw, 8px); overflow-wrap: anywhere; text-align: left; font-variant-numeric: tabular-nums; }
.ea-day[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.ea-day small { font-size: 11px; color: var(--subtle); }
.ea-gain, .latest[data-direction="up"] { color: var(--up-text); }
.ea-loss, .latest[data-direction="down"] { color: var(--down-text); }
#ea-day-panel .ea-detail-heading { margin-top: 8px; }
#ea-curve-plot { min-width: 0; height: 330px; }
#ea-curve-hover { min-height: 1.2em; }
#ea-chart { height: clamp(250px, 49dvh, 650px); isolation: isolate; }
.ea-chart-frame { position: relative; margin-top: 7px; }
#ea-manual-tools, #ea-order-form { margin-top: 8px; }
#ea-order-form { padding: 8px; border: 1px solid var(--line, #363a45); border-radius: 6px; }
#ea-order-form input { width: 8em; }
#ea-manual-search { width: 10em; }
#ea-protection-handles { position: absolute; inset: 0; pointer-events: none; }
.ea-level-handle {
  position: absolute; top: 0; right: 0; z-index: 1;
  padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px;
  background: var(--surface); color: var(--level-color); font-size: 12px;
  pointer-events: auto; touch-action: none; cursor: ns-resize; white-space: nowrap;
}
.ea-level-handle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#ea-manual-tools .ea-buy { color: #2962ff; }
#ea-manual-tools .ea-sell { color: #e05260; }
#ea-chart-status { margin: 6px 0 0; }
.panel-title { justify-content: space-between; margin-bottom: 12px; }
h1, h2, .eyebrow { margin: 0; }
h2 { font-size: 16px; }
.eyebrow { font-size: 11px; color: var(--subtle); margin-bottom: 4px; }
.feed { color: var(--subtle); font-size: 12px; }
.badge { padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--accent); white-space: nowrap; }
main { position: relative; display: flex; flex: 1; min-height: 0; }
.market { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.market-tools { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.layout-tools { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-right: 1px solid var(--border); }
#chart-top-slot { flex: 1; min-width: 0; }
.chart-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 43px minmax(0, 1fr); }
#chart-draw-slot { min-height: 0; }
.draw-tools { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: auto; padding: 5px 3px; border-right: 1px solid var(--border); }
.draw-tools button.secondary { width: 34px; height: 34px; flex: 0 0 auto; font-size: 19px; padding: 0; border-color: transparent; }
#chart-grid { display: grid; min-width: 0; min-height: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
#chart-grid[data-layout="horizontal"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#chart-grid[data-layout="vertical"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.chart-content { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#chart-grid:not([data-layout="single"]) .chart-content { border: 1px solid var(--border); }
#chart-grid:not([data-layout="single"]) .chart-content.is-active { border-color: var(--accent); }
.pane-number { display: none; color: var(--accent); font-size: 11px; }
#chart-grid:not([data-layout="single"]) .pane-number { display: inline; }
.chart-meta { position: absolute; z-index: 2; top: 0; left: 0; max-width: calc(100% - 60px); pointer-events: none; background: color-mix(in srgb, var(--bg) 90%, transparent); border-radius: 0 0 5px 0; }
.chart-heading { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 2px; font-size: 13px; }
.chart-period { color: var(--subtle); }
.price-chart { width: 100%; flex: 1; min-height: 0; isolation: isolate; }
.draw-style { position: absolute; z-index: 3; bottom: 36px; left: 8px; max-width: calc(100% - 16px); display: flex;
  align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.draw-style input[type="color"] { width: 30px; height: 27px; padding: 2px; }
.draw-style input[type="number"] { width: 94px; }
.latest { font: 600 14px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-direction: column; gap: 2px; width: fit-content; max-width: 100%; max-height: min(34dvh, 300px); overflow: auto; font-size: 11px; padding: 0 8px 4px 10px; pointer-events: auto; }
.legend:empty { display: none; }
.legend-row { display: flex; align-items: center; gap: 5px; min-height: 22px; padding-left: 5px; border-left: 2px solid var(--line-color); white-space: nowrap; }
.legend-name, .legend-values { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.legend-name { font-weight: 600; }
.legend-values, .legend-row.is-hidden .legend-name { color: var(--subtle); }
.legend-actions { display: inline-flex; flex: none; gap: 2px; margin-left: auto; }
.legend .legend-control { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; color: var(--subtle); background: transparent; }
.legend-control svg { width: 15px; height: 15px; pointer-events: none; }
.legend .legend-control:hover { color: var(--text); background: var(--active); }
.legend .legend-remove:hover { color: var(--down-text); }
.legend-row:not(.is-hidden) .legend-eye-slash { display: none; }
.footnote { color: var(--subtle); font-size: 11px; line-height: 1.45; }
.footnote a { color: inherit; }
.ohlc { padding: 0 10px 4px; color: var(--subtle); font: 11px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.workspace-panel { flex: 0 0 min(36vw, 390px); min-width: 290px; overflow: auto; background: var(--bg); border-left: 1px solid var(--border); }
.panel-top { display: flex; justify-content: flex-end; padding: 6px 10px 0; }
.panel { min-width: 0; padding: 10px 14px; }
textarea, input, select { color: var(--text); background: var(--field); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font: inherit; font-size: 13px; }
textarea { width: 100%; min-height: 180px; resize: vertical; tab-size: 4; font-family: ui-monospace, Consolas, monospace; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.actions { margin-top: 8px; flex-wrap: wrap; }
.indicator-tabs, .indicator-row-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
#indicator-search { margin-top: 8px; width: 100%; }
.indicator-row { padding: 8px 0; border-top: 1px solid var(--border); }
.indicator-row strong { font-size: 13px; overflow-wrap: anywhere; }
.indicator-row-actions { margin-top: 4px; }
.indicator-row-actions select { font-size: 12px; padding: 4px 6px; }
#indicator-form { display: grid; gap: 6px; font-size: 13px; }
#indicator-form .footnote { margin: 0; }
button { padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; background: var(--text); color: var(--bg); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
button:hover:not(:disabled):not(.secondary) { background: color-mix(in srgb, var(--text) 85%, var(--bg)); }
button.secondary { color: var(--text); background: transparent; border-color: var(--border); }
button.secondary:hover:not(:disabled), .study-menu summary:hover { background: var(--hover); }
button.secondary:is([aria-pressed="true"], [aria-expanded="true"]) { background: var(--active); }
button:disabled, select:disabled { opacity: .5; cursor: default; }
.error { color: var(--down-text); }
#access { display: flex; align-items: center; gap: 8px; padding: 7px 12px; flex-wrap: wrap; }
#feed-error { margin: 0; padding: 5px 12px; font-size: 12px; max-height: 4em; overflow: auto; }
.signals table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.signals :is(th, td) { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.signals th { font-weight: 500; color: var(--subtle); }
.signals td { overflow-wrap: anywhere; }
.signals td:first-child { width: 136px; font-variant-numeric: tabular-nums; }
.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 5px 8px; }
.symbol-trigger.secondary { font-weight: 650; }
.symbol-trigger span:first-child { font-size: 16px; line-height: 1; }
.control { display: inline-flex; align-items: center; gap: 5px; color: var(--subtle); font-size: 12px; white-space: nowrap; }
.control select { padding: 4px 6px; }
.study-menu { position: relative; z-index: 4; }
.study-menu summary { cursor: pointer; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; white-space: nowrap; }
.study-options { position: absolute; top: calc(100% + 4px); left: 0; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 16px #0005; }
.study-options label { display: flex; align-items: center; gap: 5px; white-space: nowrap; padding: 4px; font-size: 12px; }
.study-options input, .replay-position { accent-color: var(--accent); }
.chart-options { display: grid; gap: 4px; }
.fullscreen-trigger { margin-left: auto; }
.replay-controls { border-bottom: 1px solid var(--border); }
.replay-position { flex: 1 1 80px; min-width: 65px; padding: 0; }
.chart-ranges { flex-wrap: nowrap; overflow: auto; border-top: 1px solid var(--border); scrollbar-width: thin; }
.chart-status { display: flex; gap: 8px; min-height: 20px; padding: 2px 8px; overflow: hidden; white-space: nowrap; }
.chart-context { margin-left: auto; text-overflow: ellipsis; overflow: hidden; }
.draw-status:empty { display: none; }
.attribution { padding: 2px 8px; border-top: 1px solid var(--border); font-size: 10px; }
.in-replay :is([data-range], [data-replay-lock]) { opacity: .5; pointer-events: none; }
dialog { width: min(460px, calc(100vw - 24px)); max-height: 80dvh; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
dialog::backdrop { background: #0008; }
#indicator-settings-dialog { width: min(500px, calc(100vw - 24px)); }
.settings-fields { display: grid; gap: 8px; margin: 12px 0; }
.settings-field, .settings-output label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 45%); align-items: center; gap: 10px; font-size: 13px; }
.settings-field :is(input, select, textarea), .settings-output select { min-width: 0; width: 100%; }
.settings-fields input:is([type="color"], [type="checkbox"]) { justify-self: start; width: auto; margin: 0; accent-color: var(--accent); }
.settings-fields input[type="color"] { width: 46px; height: 28px; padding: 2px; }
.settings-fields textarea { min-height: 70px; }
.settings-output { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 5px; padding: 8px; margin: 0; min-width: 0; }
.settings-output legend { font-size: 13px; color: var(--subtle); overflow-wrap: anywhere; }
.settings-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.settings-actions #settings-reset { margin-right: auto; }
#symbol-search { width: 100%; }
.symbol-results { max-height: 46dvh; overflow: auto; display: grid; gap: 4px; }
.symbol-results button { display: flex; gap: 8px; align-items: baseline; white-space: normal; text-align: left; }
.symbol-results span { color: var(--subtle); overflow-wrap: anywhere; }
.range-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.range-form label { display: grid; gap: 4px; font-size: 12px; }
.range-form p { flex-basis: 100%; margin: 0; }
@media (max-width: 700px) {
  .topbar { gap: 5px; padding-inline: 6px; }
  .topbar h1 { font-size: 12px; }
  #health { display: none; }
  .workspace-panel { position: absolute; z-index: 6; inset: 0 0 0 auto; width: min(94vw, 390px); min-width: 0; box-shadow: -12px 0 25px #0005; }
  .chart-workspace { grid-template-columns: 36px minmax(0, 1fr); }
  .draw-tools button.secondary { width: 30px; height: 32px; }
  .chart-toolbar { padding: 4px; gap: 4px; }
  .chart-menu .study-options { left: auto; right: 0; }
  .chart-context { display: none; }
  .market-tools { flex-wrap: wrap; }
  .layout-tools { border-right: 0; }
  #chart-top-slot { flex: 1 1 215px; }
  #chart-grid[data-layout="horizontal"] { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr); }
  .legend .legend-control { width: 27px; height: 27px; }
}