/* ===== Strategies view — restyle on top of strategies.css (loaded after it).
   One control height for every row (38px), Phosphor icons from the sprite,
   the app's designed dropdown (.vsel), liquid primary CTAs, Satoshi numbers.
   Layout: toolbar row → chart card that fills the viewport height → results
   card below; the Vera panel is pinned beside them while the page scrolls.
   Every rule is scoped to #view-strategies. ===== */
#view-strategies {
	--num: "Satoshi", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sr-ctl: 38px;
	--sr-ctl-sm: 32px;
	--sr-top: var(--topbar-h, 80px);
	/* The band is bright (white sun → light blue → blue) in both themes, so the
	   header is ink on it and the chips are frosted white. */
	--sr-band: #3d65f6;
	--sr-band-fg: #0f1012;
	--sr-band-dim: rgba(15, 16, 18, 0.62);
	--sr-band-chip: rgba(255, 255, 255, 0.62);
	--sr-band-chip-hover: rgba(255, 255, 255, 0.85);
	--sr-band-chip-border: rgba(15, 16, 18, 0.1);
	--sr-caret-uri: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>");
}

/* ----- Page frame ----- */
#view-strategies .sr-shell {
	height: auto;
	min-height: 0;
}
#view-strategies .sr-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 16px;
	height: auto;
	align-items: start;
}
#view-strategies .sr-main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	overflow: visible;
	padding: 0;
}
#view-strategies .sr-chart-workspace,
#view-strategies .sr-bottom,
#view-strategies .sr-ai {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 24px;
	min-width: 0;
}
#view-strategies .sr-shell [hidden] {
	display: none !important;
}
#view-strategies .sr-spacer {
	flex: 1;
}

/* ----- Icons ----- */
#view-strategies .sr-ic {
	width: 16px;
	height: 16px;
	flex: none;
	fill: currentColor;
}
#view-strategies .sr-caret {
	width: 14px;
	height: 14px;
	color: var(--muted);
	transition: transform 0.16s ease;
}
#view-strategies .sr-menu[open] > summary .sr-caret,
#view-strategies .sm-trigger[aria-expanded="true"] .sr-caret {
	transform: rotate(180deg);
}

/* ----- Controls: one height, pill shape ----- */
#view-strategies label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
}
#view-strategies button,
#view-strategies .sr-menu > summary {
	height: var(--sr-ctl);
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card-2);
	color: var(--txt);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition:
		background 0.12s,
		border-color 0.12s,
		color 0.12s;
}
#view-strategies button:hover,
#view-strategies .sr-menu > summary:hover {
	background: var(--hover);
	border-color: var(--border-2);
	color: var(--txt);
	transform: none;
}
#view-strategies button:disabled {
	opacity: 0.45;
	cursor: default;
}
#view-strategies button.sr-icon-button {
	width: var(--sr-ctl);
	padding: 0;
	flex: none;
}
#view-strategies button .sr-ic:first-child:not(:last-child) {
	margin-left: -3px;
}
#view-strategies .lq-wrap {
	flex: none;
}
#view-strategies .lq-btn {
	min-height: var(--sr-ctl);
	height: var(--sr-ctl);
	padding: 0 18px;
	font-size: 13px;
}
/* Toggle chips (Indicators / Signals / AI context): filled when on. */
#view-strategies .sr-toggle {
	position: relative;
	height: var(--sr-ctl);
	padding: 0 13px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card-2);
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition:
		background 0.12s,
		color 0.12s,
		border-color 0.12s;
}
#view-strategies .sr-toggle:hover {
	color: var(--txt);
	background: var(--hover);
}
#view-strategies .sr-toggle .sr-ic {
	margin-left: -2px;
}
#view-strategies .sr-toggle input[type="checkbox"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none;
}
#view-strategies .sr-toggle:has(input:checked) {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}
#view-strategies .sr-toggle:has(input:focus-visible) {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}
/* Designed dropdown, pill shaped here */
#view-strategies .vsel {
	width: auto;
	min-width: 0;
	margin: 0;
}
#view-strategies .vsel-btn {
	height: var(--sr-ctl);
	padding: 0 12px 0 14px;
	border-radius: 999px;
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt);
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
}
#view-strategies .vsel-btn:hover {
	background: var(--hover);
	border-color: var(--border-2);
}
#view-strategies .vsel.open .vsel-btn {
	border-color: var(--txt);
	box-shadow: 0 0 0 1px var(--txt);
}
#view-strategies .vsel-caret {
	font-size: 0;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--sr-caret-uri) center / contain no-repeat;
	mask: var(--sr-caret-uri) center / contain no-repeat;
}
/* Text inputs */
#view-strategies input:not([type="range"]):not([type="checkbox"]):not([type="hidden"]) {
	height: var(--sr-ctl);
	width: auto;
	margin: 0;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--card-2);
	color: var(--txt);
	font-size: 13px;
	color-scheme: dark;
}
html[data-theme="light"] #view-strategies input {
	color-scheme: light;
}
#view-strategies input:focus-visible,
#view-strategies textarea:focus-visible {
	outline: 0;
	border-color: var(--txt);
	box-shadow: 0 0 0 1px var(--txt);
}
#view-strategies :is(button, summary, .vsel-btn):focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* ----- Toolbar row: strategy switcher, Parameters, period, run ----- */
#view-strategies .sr-toolbar-row {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 40px;
	padding: 0 2px;
}
#view-strategies .sr-menu {
	position: relative;
	flex: none;
	border: 0;
	padding: 0;
}
#view-strategies .sr-menu > summary {
	list-style: none;
	user-select: none;
}
#view-strategies .sr-menu > summary::-webkit-details-marker {
	display: none;
}
#view-strategies .sr-menu > summary::before,
#view-strategies .sr-menu > summary::after {
	content: none;
}
#view-strategies .sr-menu[open] > summary {
	background: var(--hover);
	border-color: var(--border-2);
}
#view-strategies .sr-menu > summary > .sr-ic:first-child {
	color: var(--muted);
	margin-left: -3px;
}
#view-strategies .sr-strategy-menu > summary {
	height: 40px;
	max-width: 380px;
	padding: 0 10px 0 12px;
	background: transparent;
	border-color: transparent;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
#view-strategies .sr-strategy-menu > summary:hover,
#view-strategies .sr-strategy-menu[open] > summary {
	background: var(--hover);
	border-color: transparent;
}
#view-strategies #sr-saved-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Popover: same shape as the app's dropdown menu (.vsel-menu). */
#view-strategies .sr-menu-content {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	min-width: 220px;
	padding: 6px;
	border-radius: 16px;
	background: var(--card);
	border: 1px solid var(--border-2);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.02) inset;
	transform-origin: top left;
	animation: vsel-in 0.12s ease;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
#view-strategies .sr-menu-right .sr-menu-content {
	left: auto;
	right: 0;
	transform-origin: top right;
}
#view-strategies .sr-menu-sep {
	height: 1px;
	margin: 4px 6px;
	background: var(--border);
	flex: none;
}
#view-strategies .sr-strategy-list {
	width: 320px;
}
#view-strategies #sr-saved-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 320px;
	overflow: auto;
}
#view-strategies .sr-saved-item,
#view-strategies .sr-strategy-list > button,
#view-strategies .sr-export-list > button {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--txt-2);
	font-size: 13px;
	font-weight: 500;
	justify-content: flex-start;
	gap: 9px;
	margin: 0;
}
#view-strategies .sr-saved-item:hover,
#view-strategies .sr-strategy-list > button:hover,
#view-strategies .sr-export-list > button:hover {
	background: var(--hover);
	border-color: transparent;
	color: var(--txt);
}
#view-strategies .sr-saved-item span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#view-strategies .sr-saved-item small {
	margin-left: auto;
	font-family: var(--num);
	font-size: 11.5px;
	color: var(--muted);
}
#view-strategies .sr-saved-item.selected {
	color: var(--txt);
}
#view-strategies .sr-saved-item .sr-check {
	margin-left: auto;
	color: var(--blue);
}
#view-strategies .sr-saved-item small + .sr-check {
	margin-left: 0;
}
#view-strategies #sr-new {
	color: var(--txt);
	font-weight: 600;
}
#view-strategies #sr-new .sr-ic,
#view-strategies .sr-export-list .sr-ic {
	color: var(--muted);
}
/* Period + exact dates */
#view-strategies .sr-date-fields {
	width: 300px;
	padding: 10px;
	gap: 10px;
}
#view-strategies .sr-date-fields label {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	font-size: 12.5px;
	color: var(--muted);
}
#view-strategies .sr-date-fields .vsel,
#view-strategies .sr-date-fields .vsel-btn,
#view-strategies .sr-date-fields input {
	width: 100%;
}
#view-strategies #sr-dates-done {
	align-self: flex-end;
	margin-top: 2px;
}
#view-strategies .sr-mode {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 4px 0 2px;
	font-size: 12.5px;
	color: var(--muted);
	cursor: help;
	white-space: nowrap;
}
#view-strategies .sr-mode .sr-ic {
	width: 15px;
	height: 15px;
}
/* Parameters: full-width panel under the toolbar */
#view-strategies #sr-settings {
	position: static;
}
#view-strategies .sr-settings-pop {
	left: 0;
	right: 0;
	padding: 16px 18px 18px;
	display: block;
}
#view-strategies .sr-pop-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 14px;
}
#view-strategies .sr-pop-head strong {
	font-size: 15px;
}
#view-strategies #sr-config-summary {
	margin: 0;
	font-size: 12.5px;
	color: var(--muted);
}
#view-strategies .sr-settings form {
	padding: 0;
}
#view-strategies .sr-settings-market {
	display: grid;
	grid-template-columns: 2fr 1fr 1.2fr 1fr;
	gap: 12px;
}
#view-strategies .sr-settings-market label,
#view-strategies .sr-parameter-market {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
	font-size: 12.5px;
	color: var(--muted);
	min-width: 0;
}
#view-strategies .sr-settings-market input,
#view-strategies .sr-settings-market .vsel,
#view-strategies .sr-settings-market .vsel-btn {
	width: 100%;
}
#view-strategies #sr-parameter-source {
	display: flex;
	align-items: center;
	min-height: var(--sr-ctl);
	color: var(--txt-2);
	font-size: 13px;
}
#view-strategies .sr-parameter-market .sm-trigger {
	align-self: flex-start;
}
#view-strategies .sr-controls-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 20px;
	margin-top: 16px;
}
#view-strategies .sr-controls-grid fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
#view-strategies .sr-controls-grid legend {
	padding: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--txt);
}
#view-strategies .sr-controls-grid label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 6px 0;
	font-size: 12.5px;
	color: var(--muted);
}
#view-strategies .sr-controls-grid input {
	width: 92px;
	height: var(--sr-ctl-sm);
	padding: 0 10px;
	flex: none;
	text-align: right;
	font-family: var(--num);
}
#view-strategies .sr-controls-grid .vsel {
	width: 148px;
	flex: none;
}
#view-strategies .sr-controls-grid .vsel-btn {
	width: 100%;
	height: var(--sr-ctl-sm);
	padding: 0 10px 0 12px;
	font-size: 12.5px;
}
#view-strategies .sr-settings-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 14px;
	margin-top: 16px;
	border-top: 1px solid var(--border);
	font-size: 12.5px;
}
#view-strategies .sr-parameter-guide {
	flex: 1;
	color: var(--muted);
	min-width: 160px;
}
#view-strategies .sr-parameter-guide p {
	max-width: 60ch;
	line-height: 1.6;
	margin: 8px 0 0;
}
#view-strategies #sr-unsaved {
	color: var(--muted);
}

/* ----- Chart card: fills the viewport height, never scrolls for one chart ----- */
#view-strategies .sr-chart-workspace {
	height: calc(100dvh - var(--sr-top) - 78px);
	min-height: 520px;
	flex: none;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
}
#view-strategies .sr-chart-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	flex-wrap: wrap;
	min-height: var(--sr-ctl);
	flex: none;
}
#view-strategies .sr-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--txt);
}
#view-strategies .sr-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--blue);
}
#view-strategies .sr-status.sr-error {
	color: var(--down);
}
#view-strategies .sr-progress {
	margin: 0;
	border-radius: 2px;
	background: var(--border);
}
#view-strategies .sr-progress span {
	background: var(--blue);
}
#view-strategies .sr-jobs {
	padding: 0;
	gap: 6px;
}
#view-strategies .sr-jobs button {
	flex: 1;
	min-width: 160px;
	max-width: 300px;
	justify-content: space-between;
	font-size: 12.5px;
}
#view-strategies .sr-jobs button.active {
	border-color: var(--txt);
	background: var(--card-2);
}
#view-strategies .sr-charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	grid-auto-rows: minmax(380px, 1fr);
	gap: 12px;
	flex: 1;
	min-height: 0;
	padding: 0;
	overflow: auto;
	scrollbar-width: thin;
}
#view-strategies .sr-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: 12px 16px 12px;
	border-radius: 20px;
	background: var(--card-2);
	border: 1px solid var(--border);
	overflow: hidden;
}
#view-strategies .sr-panel-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0;
	margin: 0 0 6px;
	min-height: var(--sr-ctl);
	flex: none;
}
#view-strategies .sr-panel button,
#view-strategies .sr-panel .vsel-btn,
#view-strategies .sr-panel .sr-toggle {
	background: var(--card);
}
#view-strategies .sr-panel .sr-toggle:has(input:checked) {
	background: var(--accent);
}
#view-strategies button.sm-trigger {
	height: var(--sr-ctl);
	width: auto;
	padding: 0 10px 0 6px;
	border-color: transparent;
	background: transparent;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	gap: 8px;
}
#view-strategies button.sm-trigger:hover {
	background: var(--hover);
	border-color: transparent;
}
#view-strategies .sm-trigger .coin-ico {
	width: 26px;
	height: 26px;
}
#view-strategies .sm-trigger strong {
	font-weight: 700;
}
#view-strategies .sm-trigger > span {
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
}
#view-strategies .sm-trigger .sr-caret {
	margin-left: -3px;
}
#view-strategies .sr-chart-source {
	font-size: 12.5px;
	color: var(--muted);
	white-space: nowrap;
}
#view-strategies .sr-panel-head .vsel {
	width: 84px;
}
#view-strategies .sr-panel-head .sr-remove-chart {
	background: transparent;
	border-color: transparent;
	color: var(--muted);
	font-size: 13px;
}
#view-strategies .sr-panel-head .sr-remove-chart:hover {
	background: var(--hover);
	color: var(--txt);
}
#view-strategies .sr-price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 2px 4px 8px;
	flex: none;
}
#view-strategies .sr-price-val {
	font-family: var(--num);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--txt);
}
#view-strategies .sr-price-chg {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--num);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--txt-2);
}
#view-strategies .sr-price-chg .sr-ic {
	width: 15px;
	height: 15px;
}
#view-strategies .sr-chart {
	flex: 1;
	height: auto;
	min-height: 0;
	border-radius: 14px;
	overflow: hidden;
}
#view-strategies .sr-chart-label {
	flex: none;
	min-height: 0;
	margin: 0;
	padding: 8px 4px 0;
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#view-strategies .sr-chart-loading {
	border-radius: 12px;
	background: var(--card);
	font-size: 12.5px;
}
#view-strategies .sr-chart-loading button {
	height: var(--sr-ctl-sm);
	padding: 0 12px;
	font-size: 12px;
}
#view-strategies .sr-replay {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 0 0;
	border: 0;
	flex: none;
}
#view-strategies .sr-replay button {
	width: var(--sr-ctl);
	padding: 0;
}
#view-strategies .sr-replay input[type="range"] {
	flex: 1;
	min-width: 60px;
	height: 4px;
	accent-color: var(--blue);
}
#view-strategies .sr-replay time {
	font-family: var(--num);
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}
#view-strategies .sr-replay .vsel {
	width: 84px;
}
#view-strategies .sr-execution {
	flex: none;
	padding: 6px 4px 0;
	font-size: 12px;
	color: var(--muted);
}

/* ----- Results card: inline tabs + export, stat tiles, report, paper row ----- */
#view-strategies .sr-bottom {
	padding: 14px 18px 16px;
}
#view-strategies .sr-tabs {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin-bottom: 14px;
	border: 0;
}
#view-strategies .sr-tab-list {
	display: inline-flex;
	flex: none;
	gap: 2px;
	max-width: 100%;
	padding: 3px;
	border-radius: 999px;
	background: var(--card-2);
	border: 1px solid var(--border);
	overflow: auto;
	scrollbar-width: none;
}
#view-strategies .sr-tab-list button {
	flex: none;
	height: 32px;
	min-width: 0;
	padding: 0 16px;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}
#view-strategies .sr-tab-list button:hover {
	color: var(--txt);
	background: var(--hover);
}
#view-strategies .sr-tab-list button.active {
	background: var(--accent);
	color: var(--on-accent);
}
#view-strategies #sr-downloads {
	margin-left: auto;
}
#view-strategies #sr-downloads > summary {
	width: auto;
	padding: 0 14px;
}
#view-strategies .sr-export-list {
	min-width: 200px;
}
#view-strategies .sr-metrics {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	padding: 0 0 14px;
}
#view-strategies .sr-metric {
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--card-2);
	border: 1px solid var(--border);
	min-width: 0;
}
#view-strategies .sr-metric span {
	display: block;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 8px;
}
#view-strategies .sr-metric b {
	display: block;
	font-family: var(--num);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#view-strategies .sr-metric b.sr-na {
	color: var(--faint);
	font-weight: 500;
}
#view-strategies .sr-result-context {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0;
	margin-bottom: 12px;
	font-size: 12.5px;
	color: var(--muted);
}
#view-strategies #sr-show-test {
	height: var(--sr-ctl-sm);
	min-height: 0;
	padding: 0 12px;
	font-size: 12px;
}
#view-strategies .sr-report-content {
	padding: 0;
	max-height: 360px;
	font-size: 13px;
}
#view-strategies .sr-report-content p {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.6;
}
#view-strategies .sr-empty {
	padding: 22px 4px;
	font-size: 13px;
	color: var(--muted);
}
#view-strategies .sr-report-title {
	padding-top: 4px;
	font-size: 13px;
}
#view-strategies .sr-report-title strong {
	font-weight: 700;
}
#view-strategies .sr-report-title span {
	font-family: var(--num);
	font-size: 12px;
	color: var(--muted);
}
#view-strategies .sr-equity {
	height: 160px;
	margin: 10px 0;
	border-radius: 12px;
	overflow: hidden;
}
#view-strategies .sr-run-stats,
#view-strategies .sr-assumptions {
	padding: 12px 0;
	border-top: 1px solid var(--border);
	font-size: 12.5px;
	color: var(--muted);
}
/* Plain disclosure rows: Phosphor caret via mask, rotates when open */
#view-strategies :is(.sr-run-stats, .sr-assumptions, .sr-parameter-guide, .sr-rule-edit) > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--txt-2);
}
#view-strategies :is(.sr-run-stats, .sr-assumptions, .sr-parameter-guide, .sr-rule-edit) > summary::-webkit-details-marker {
	display: none;
}
#view-strategies :is(.sr-run-stats, .sr-assumptions, .sr-parameter-guide, .sr-rule-edit) > summary::after {
	content: "";
	width: 14px;
	height: 14px;
	margin: 0;
	background: currentColor;
	-webkit-mask: var(--sr-caret-uri) center / contain no-repeat;
	mask: var(--sr-caret-uri) center / contain no-repeat;
	transition: transform 0.16s ease;
}
#view-strategies :is(.sr-run-stats, .sr-assumptions, .sr-parameter-guide, .sr-rule-edit)[open] > summary::after {
	transform: rotate(180deg);
}
#view-strategies .sr-stat-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px 12px;
	padding: 16px 0 8px;
}
#view-strategies .sr-stat-grid span {
	display: block;
	font-size: 12px;
	margin-bottom: 4px;
	color: var(--muted);
}
#view-strategies .sr-stat-grid b {
	font-family: var(--num);
	font-size: 14px;
	font-weight: 600;
	color: var(--txt);
}
#view-strategies .sr-months {
	gap: 10px;
	padding: 4px 0 0;
}
#view-strategies .sr-months span {
	font-family: var(--num);
	font-size: 12px;
}
#view-strategies .sr-table {
	font-size: 12.5px;
}
#view-strategies .sr-table th {
	padding: 8px 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--muted);
	background: var(--card);
	border-bottom: 1px solid var(--border);
}
#view-strategies .sr-table td {
	padding: 10px;
	border-bottom: 1px solid var(--border);
	font-family: var(--num);
	font-variant-numeric: tabular-nums;
}
#view-strategies .sr-table tbody tr:hover td {
	background: var(--hover);
}
#view-strategies .sr-table button {
	height: 30px;
	padding: 0 12px;
	font-size: 12px;
}
#view-strategies .sr-journal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0 12px;
	font-size: 12.5px;
	color: var(--muted);
}
#view-strategies .sr-journal-head .vsel {
	width: 160px;
}
#view-strategies .sr-signal-row {
	padding: 10px 0;
	font-size: 12.5px;
}
#view-strategies .sr-signal-row time {
	font-family: var(--num);
}
#view-strategies .sr-rule-card {
	padding: 14px 16px;
	margin-bottom: 8px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--card-2);
	font-size: 13px;
}
#view-strategies .sr-rule-card > span {
	min-width: 80px;
	font-size: 12.5px;
	color: var(--muted);
}
#view-strategies .sr-rule-card strong {
	font-weight: 600;
}
#view-strategies .sr-rule-edit {
	padding-top: 6px;
}
#view-strategies #sr-rule-form textarea {
	width: 100%;
	min-height: 240px;
	margin: 12px 0;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: var(--card-2);
	color: var(--txt);
	font: 12px/1.6 var(--num);
}
/* Paper testing: one row at the foot of the results card */
#view-strategies .sr-paper-settings {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 14px 0 0;
	border-top: 1px solid var(--border);
	color: var(--txt);
	font-size: 13px;
}
#view-strategies .sr-paper-copy {
	display: flex;
	align-items: center;
	gap: 10px;
}
#view-strategies .sr-paper-copy > .sr-ic {
	width: 18px;
	height: 18px;
	color: var(--muted);
}
#view-strategies .sr-paper-copy strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
}
#view-strategies .sr-paper-copy small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--muted);
}
#view-strategies .sr-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
#view-strategies .sr-toolbar label {
	gap: 8px;
	font-size: 12.5px;
	color: var(--muted);
}
#view-strategies .sr-toolbar .vsel {
	width: 110px;
}

/* ----- Vera panel: pinned beside the page, navy ASCII band at the top ----- */
#view-strategies .sr-ai {
	position: sticky;
	top: calc(var(--sr-top) + 8px);
	height: calc(100dvh - var(--sr-top) - 24px);
	min-height: 560px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
}
#view-strategies .sr-ai-ascii {
	position: absolute;
	inset: 0 0 auto;
	height: 224px;
	z-index: 0;
	background: var(--sr-band);
	-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
	transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Soft white scrim behind the header row so the title and chips stay readable
   over the glyphs (the band's mask leaves the top untouched). */
#view-strategies .sr-ai-ascii::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 96px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
	pointer-events: none;
}
#view-strategies .sr-ai-ascii-fallback {
	background:
		radial-gradient(90% 80% at 50% 0%, #ffffff 0%, #b9c8ff 35%, #6f8fff 65%, transparent 100%),
		var(--sr-band);
}
#view-strategies .sr-ai:has(.sr-message) .sr-ai-ascii {
	height: 66px;
	-webkit-mask-image: none;
	mask-image: none;
}
#view-strategies .sr-ai > :not(.sr-ai-ascii) {
	position: relative;
	z-index: 1;
}
#view-strategies .sr-ai-head {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 66px;
	flex: none;
	padding: 0 14px 0 16px;
	border: 0;
	background: none;
	color: var(--sr-band-fg);
}
#view-strategies .sr-hero-orb canvas {
	display: block;
}
/* Contrast for the title row without a shape or a shadow: an edge-less
   frosted strip spans the row and blurs the glyphs beneath it into a soft
   wash, fading out before the orb. */
#view-strategies .sr-ai-head::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(14px) saturate(1.05);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	pointer-events: none;
}
#view-strategies .sr-ai-head strong {
	font-size: 15px;
	font-weight: 700;
}
#view-strategies .sr-ai-head > span {
	font-size: 12.5px;
	color: var(--sr-band-dim);
	margin-right: auto;
}
#view-strategies .sr-ai-head button {
	height: var(--sr-ctl-sm);
	padding: 0 12px;
	margin: 0;
	background: var(--sr-band-chip);
	border-color: var(--sr-band-chip-border);
	color: var(--sr-band-fg);
	font-size: 12.5px;
	backdrop-filter: blur(8px);
}
#view-strategies .sr-ai-head button:hover {
	background: var(--sr-band-chip-hover);
	border-color: var(--sr-band-chip-border);
	color: var(--sr-band-fg);
}
#view-strategies .sr-ai-head button.sr-icon-button {
	width: var(--sr-ctl-sm);
	padding: 0;
}
#view-strategies .sr-ai-head button .sr-ic {
	width: 15px;
	height: 15px;
}
#view-strategies #sr-code-open {
	margin-left: 0;
	font-size: 12.5px;
	gap: 6px;
}
#view-strategies .sr-conversation {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 0 16px 12px;
	scrollbar-width: thin;
}
#view-strategies .sr-ai:has(.sr-message) .sr-conversation {
	padding-top: 16px;
}
#view-strategies .sr-welcome {
	padding-top: 4px;
}
/* orb.js sets the host's own width/height inline, so centre it with auto margins */
#view-strategies .sr-hero-orb {
	display: block;
	margin: 0 auto 18px;
}
#view-strategies .sr-hello {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--txt);
}
#view-strategies .sr-hello em {
	font-style: normal;
	color: var(--link);
}
html[data-theme="light"] #view-strategies .sr-hello em {
	color: var(--blue);
}
#view-strategies .sr-welcome h2 {
	max-width: none;
	margin: 0 0 22px;
	font: 600 28px/1.15 var(--ui);
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--txt);
}
#view-strategies .sr-starters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
#view-strategies .sr-starter {
	height: auto;
	min-height: 112px;
	padding: 14px;
	border-radius: 18px;
	border: 1px solid var(--border);
	background: var(--card-2);
	color: var(--txt);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
}
#view-strategies .sr-starter:hover {
	background: var(--hover);
	border-color: var(--border-2);
}
#view-strategies .sr-starter-ic {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	color: var(--txt);
	border: 1px solid var(--border);
}
#view-strategies .sr-starter-ic .tb-ic {
	width: 16px;
	height: 16px;
}
#view-strategies .sr-starter-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
#view-strategies .sr-starter-txt small {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
}
#view-strategies .sr-message {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.65;
}
#view-strategies .sr-role {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--txt);
}
#view-strategies .sr-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	font-weight: 700;
}
#view-strategies .sr-avatar .sr-ic {
	width: 13px;
	height: 13px;
}
#view-strategies .sr-avatar-you {
	background: var(--accent);
	color: var(--on-accent);
}
#view-strategies .sr-avatar-vera {
	background: var(--blue);
	color: #fff;
}
#view-strategies .sr-user {
	padding: 0;
	background: none;
}
#view-strategies .sr-user .sr-text {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 16px;
	background: var(--card-2);
}
#view-strategies .sr-message pre {
	border-radius: 12px;
	background: var(--card-2);
}
#view-strategies .sr-proposal {
	margin: 0 0 18px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--card-2);
	font-size: 13px;
}
#view-strategies .sr-proposal-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
/* Thinking pill: the dotted orb (thinking-orb.js) beside the live label. */
#view-strategies .sr-thinking {
	align-items: center;
	gap: 12px;
	margin: 0 16px 10px;
	padding: 6px 16px 6px 8px;
	border-radius: 999px;
	background: var(--card-2);
	border: 1px solid var(--border);
}
#view-strategies .sr-thinking strong {
	font-size: 14px;
	font-weight: 500;
	color: var(--txt-2);
}
#view-strategies .sr-thinking time {
	font-size: 11px;
}
#view-strategies .sr-think-orb {
	flex: none;
}
#view-strategies .sr-toast {
	margin: 0 16px 8px;
	padding: 0;
	font-size: 12.5px;
	color: var(--down);
}
#view-strategies .sr-toast:empty {
	display: none;
}
/* Connectors: chips above the composer */
#view-strategies .sr-news-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px 8px;
	border: 0;
	background: none;
}
#view-strategies #sr-news-open {
	height: var(--sr-ctl-sm);
	padding: 0 12px;
	font-size: 12.5px;
}
#view-strategies #sr-news-open span {
	margin-left: 2px;
	padding: 0 6px;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--num);
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#view-strategies .sr-news-toolbar small {
	font-size: 12px;
	color: var(--muted);
}
#view-strategies .sr-news-context {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	padding: 0 16px 10px;
	border: 0;
	background: none;
}
#view-strategies .sr-news-context button {
	height: 28px;
	min-height: 0;
	margin: 0 6px 0 0;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--txt-2);
	gap: 6px;
}
#view-strategies .sr-news-context [data-news-open]:not(.sn-suggestion) {
	margin-right: 0;
	padding-right: 8px;
	border-right: 0;
	border-radius: 999px 0 0 999px;
}
#view-strategies .sr-news-context .sn-chip-remove {
	width: 26px;
	padding: 0;
	border-radius: 0 999px 999px 0;
	color: var(--muted);
}
#view-strategies .sr-news-context .sn-chip-remove .sr-ic {
	width: 12px;
	height: 12px;
}
#view-strategies .sr-news-context .sn-suggestion {
	color: var(--muted);
}
#view-strategies .sr-news-context .sn-logo {
	width: 16px;
	height: 16px;
	padding: 1px;
	border-radius: 4px;
}
/* Composer */
#view-strategies .sr-compose {
	margin: 0 14px 10px;
	padding: 10px 10px 8px 16px;
	border-radius: 22px;
	background: var(--card-2);
	border: 1px solid var(--border);
	transition: border-color 0.12s;
}
#view-strategies .sr-compose:focus-within {
	border-color: var(--border-3);
}
#view-strategies .sr-compose textarea {
	display: block;
	width: 100% !important;
	min-height: 26px !important;
	max-height: 160px;
	margin: 0 !important;
	padding: 5px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	color: var(--txt);
	resize: none;
	font-size: 14px;
	line-height: 1.5;
}
#view-strategies .sr-compose textarea::placeholder {
	color: var(--muted);
}
#view-strategies .sr-compose-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
#view-strategies #sr-context-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: auto;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
}
#view-strategies #sr-context-label .sr-ic {
	width: 14px;
	height: 14px;
}
#view-strategies #sr-stop {
	height: var(--sr-ctl-sm);
	padding: 0 12px;
	font-size: 12.5px;
}
#view-strategies .sr-ai-send {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	box-shadow: none;
	animation: none;
	font-size: 0;
}
#view-strategies .sr-ai-send:hover {
	background: var(--blue);
	color: #fff;
}
#view-strategies .sr-ai-send:disabled {
	opacity: 0.35;
}
#view-strategies .sr-ai-send .sr-ic {
	width: 18px;
	height: 18px;
}
#view-strategies .sr-ai-foot {
	flex: none;
	padding: 0 0 10px;
	text-align: center;
	font-size: 11px;
	color: var(--faint);
}

/* ----- Market picker dialog ----- */
#view-strategies .sm-dialog {
	padding: 14px;
	border-radius: 20px;
	border: 1px solid var(--border-2);
	background: var(--card);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
#view-strategies .sm-head {
	padding: 2px 2px 10px;
}
#view-strategies .sm-head strong {
	font-size: 16px;
	font-weight: 700;
}
#view-strategies .sm-head button {
	width: var(--sr-ctl-sm);
	height: var(--sr-ctl-sm);
	padding: 0;
	background: transparent;
	border-color: transparent;
	color: var(--muted);
	font-size: 13px;
}
#view-strategies .sm-head button:hover {
	background: var(--hover);
	color: var(--txt);
}
#view-strategies .sm-source {
	padding: 0 2px 10px;
}
#view-strategies .sm-source label {
	font-size: 12.5px;
}
#view-strategies .sm-source .vsel {
	min-width: 170px;
}
#view-strategies .sm-search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--sr-ctl);
	margin: 0 0 8px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--card-2);
	color: var(--muted);
}
#view-strategies .sm-search:focus-within {
	border-color: var(--txt);
}
#view-strategies .sm-search input,
#view-strategies .sn-search input {
	height: 100% !important;
	width: 100% !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	font-size: 13px;
}
#view-strategies .sm-list {
	padding: 0;
}
#view-strategies .sm-list > button {
	height: auto;
	min-height: 44px;
	padding: 8px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	font-size: 13px;
	justify-content: space-between;
}
#view-strategies .sm-list > button:hover,
#view-strategies .sm-list > button.sm-active {
	background: var(--hover);
	outline: 0;
}
#view-strategies .sm-row-symbol strong {
	font-weight: 600;
}
#view-strategies .sm-row-detail {
	font-size: 11.5px;
}
#view-strategies .sm-check {
	width: 16px;
	display: inline-flex;
	color: var(--blue);
}
#view-strategies .sm-empty {
	font-size: 12.5px;
}
#view-strategies .sm-foot {
	padding: 10px 2px 0;
	border-top: 1px solid var(--border);
	font-size: 11.5px;
}

/* ----- Connectors dialog ----- */
#view-strategies .sn-dialog {
	border-radius: 24px;
	border: 1px solid var(--border-2);
	background: var(--card);
}
#view-strategies .sn-head {
	padding: 20px 22px;
}
#view-strategies .sn-head h2 {
	font-size: 20px;
	font-weight: 700;
}
#view-strategies .sn-head p {
	font-size: 12.5px;
}
#view-strategies .sn-free {
	font-size: 12px;
}
#view-strategies #sn-close {
	width: var(--sr-ctl);
	padding: 0;
	background: transparent;
	border-color: transparent;
	color: var(--muted);
}
#view-strategies #sn-close:hover {
	background: var(--hover);
	color: var(--txt);
}
#view-strategies .sn-search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--sr-ctl);
	margin: 0 4px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--card-2);
	color: var(--muted);
}
#view-strategies .sn-search:focus-within {
	border-color: var(--txt);
}
#view-strategies .sn-filters {
	gap: 8px;
	padding: 10px 4px;
}
#view-strategies .sn-filters .vsel {
	flex: 1;
	min-width: 0;
}
#view-strategies .sn-filters .vsel-btn {
	width: 100%;
	height: var(--sr-ctl-sm);
	padding: 0 10px 0 12px;
	font-size: 12.5px;
}
#view-strategies button.sn-source {
	height: auto;
	min-height: 0;
	padding: 10px;
	margin-bottom: 2px;
	border-radius: 14px;
	border-color: transparent;
	background: transparent;
	justify-content: flex-start;
	white-space: normal;
}
#view-strategies button.sn-source:hover {
	background: var(--hover);
}
#view-strategies button.sn-source.selected {
	background: var(--card-2);
	border-color: var(--border-2);
}
#view-strategies .sn-monogram {
	border-radius: 10px;
}
#view-strategies .sn-logo {
	border-radius: 8px;
}
#view-strategies .sn-source-name strong {
	font-size: 13px;
	font-weight: 600;
}
#view-strategies .sn-source-name small {
	font-size: 11.5px;
}
#view-strategies .sn-in-context {
	color: var(--blue);
}
#view-strategies .sn-connected {
	display: inline-flex;
	color: var(--muted);
}
#view-strategies .sn-connected .sr-ic {
	width: 14px;
	height: 14px;
}
#view-strategies .sn-actions small {
	font-size: 12px;
}
#view-strategies .sn-context-switch {
	gap: 8px;
	font-size: 13px;
	color: var(--txt);
}
#view-strategies .sn-context-switch input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--blue);
}
#view-strategies .sn-articles-head button {
	height: var(--sr-ctl-sm);
	padding: 0 12px;
	font-size: 12.5px;
}
#view-strategies .sn-source-heading a {
	font-size: 12px;
}
#view-strategies .sn-foot {
	padding: 12px 22px;
	font-size: 11.5px;
}

/* ----- Code tab ----- */
#view-strategies .sc-toolbar {
	gap: 8px;
}
#view-strategies .sc-language {
	font-size: 12px;
}
#view-strategies .sc-source,
#view-strategies .sc-output {
	border-radius: 14px;
	background: var(--card-2);
	border: 1px solid var(--border);
	font-size: 12px;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
	#view-strategies .sr-body {
		grid-template-columns: 1fr;
	}
	#view-strategies .sr-ai {
		position: static;
		height: 640px;
	}
	#view-strategies .sr-metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	#view-strategies .sr-controls-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 800px) {
	#view-strategies .sr-chart-workspace {
		height: auto;
		min-height: 0;
	}
	#view-strategies .sr-charts {
		grid-auto-rows: auto;
		overflow: visible;
	}
	#view-strategies .sr-chart {
		height: 320px;
		flex: none;
	}
	#view-strategies .sr-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#view-strategies .sr-settings-market {
		grid-template-columns: 1fr 1fr;
	}
	#view-strategies .sr-controls-grid {
		grid-template-columns: 1fr;
	}
	#view-strategies .sr-starters {
		grid-template-columns: 1fr;
	}
	#view-strategies .sr-strategy-menu > summary {
		max-width: 60vw;
	}
}
@media (prefers-reduced-motion: reduce) {
	#view-strategies .sr-ai-ascii,
	#view-strategies .sr-caret,
	#view-strategies .vsel-caret {
		transition: none;
	}
}