/* TradeLogicAI front end. Neutral colours work on light and dark themes; override the custom properties in a theme. */
.tla-app {
	--tla-accent: #2a78d6;
	--tla-series-1: #2a78d6;
	--tla-series-2: #eb6834;
	--tla-pos: #2a78d6;
	--tla-neg: #e34948;
	--tla-good: #008300;
	--tla-warn: #b77a00;
	--tla-bad: #c53030;
	--tla-border: rgba(128, 128, 128, 0.28);
	--tla-soft: rgba(128, 128, 128, 0.08);
	--tla-muted: rgba(128, 128, 128, 1);
	--tla-radius: 8px;
	font-size: 15px;
	line-height: 1.5;
	max-width: 1200px;
}
.tla-app *, .tla-app *::before, .tla-app *::after { box-sizing: border-box; }
.tla-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tla-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tla-border); margin-bottom: 16px; }
.tla-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.tla-nav-link { padding: 6px 12px; border-radius: 999px; text-decoration: none !important; color: inherit; }
.tla-nav-link:hover { background: var(--tla-soft); }
.tla-nav-link.is-active { background: var(--tla-accent); color: #fff; }
.tla-balance { display: flex; align-items: center; gap: 8px; }
.tla-balance-value { font-variant-numeric: tabular-nums; }

.tla-title { margin: 0 0 12px; font-size: 1.5em; }
.tla-subtitle { margin: 0 0 10px; font-size: 1.15em; }
.tla-section { margin: 24px 0; }
.tla-back { margin: 0 0 8px; }
.tla-muted { color: var(--tla-muted); }
.tla-small { font-size: 0.87em; }
.tla-strong { font-weight: 600; }
.tla-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tla-label { font-size: 0.8em; text-transform: uppercase; letter-spacing: .04em; color: var(--tla-muted); margin: 12px 0 6px; }

.tla-card { border: 1px solid var(--tla-border); border-radius: var(--tla-radius); padding: 16px; margin: 0 0 16px; }
.tla-empty { padding: 24px; text-align: center; border: 1px dashed var(--tla-border); border-radius: var(--tla-radius); }

.tla-btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--tla-border); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; text-decoration: none !important; line-height: 1.3; }
.tla-btn:hover { background: var(--tla-soft); }
.tla-btn:disabled { opacity: .55; cursor: not-allowed; }
.tla-btn-primary, .tla-btn-buy { background: var(--tla-accent); border-color: var(--tla-accent); color: #fff !important; }
.tla-btn-primary:hover, .tla-btn-buy:hover { filter: brightness(1.08); background: var(--tla-accent); }
.tla-btn-danger { color: var(--tla-bad); border-color: var(--tla-bad); }
.tla-btn-small { padding: 4px 10px; font-size: 0.87em; }
.tla-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.tla-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 6px; border-left: 4px solid var(--tla-accent); background: var(--tla-soft); margin: 0 0 12px; }
.tla-notice-success { border-left-color: var(--tla-good); }
.tla-notice-error { border-left-color: var(--tla-bad); }
.tla-notice-warning { border-left-color: var(--tla-warn); }
.tla-notice-info { display: block; }
.tla-notice-close { background: none; border: 0; font-size: 1.3em; cursor: pointer; color: inherit; line-height: 1; }

.tla-loading { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.tla-spinner { width: 18px; height: 18px; border: 2px solid var(--tla-border); border-top-color: var(--tla-accent); border-radius: 50%; animation: tla-spin 0.9s linear infinite; flex: none; }
@keyframes tla-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tla-spinner { animation-duration: 3s; } }

.tla-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.tla-status-ready, .tla-status-completed, .tla-confidence-high { color: var(--tla-good); }
.tla-status-pending, .tla-status-syncing, .tla-status-queued, .tla-status-running, .tla-confidence-medium { color: var(--tla-warn); }
.tla-status-failed, .tla-confidence-low { color: var(--tla-bad); }

.tla-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--tla-border); margin: 16px 0; flex-wrap: wrap; }
.tla-tab { padding: 8px 14px; text-decoration: none !important; color: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tla-tab.is-active { border-bottom-color: var(--tla-accent); font-weight: 600; }

.tla-form { max-width: 640px; }
.tla-field { margin: 0 0 14px; }
.tla-field label { display: block; font-weight: 600; margin-bottom: 4px; }
.tla-field input[type=text], .tla-field input[type=number], .tla-field input[type=password], .tla-field select { width: 100%; max-width: 100%; padding: 8px 10px; border: 1px solid var(--tla-border); border-radius: 6px; font: inherit; }
.tla-help { margin: 4px 0 0; font-size: 0.87em; color: var(--tla-muted); }
.tla-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.tla-form-status .tla-loading { padding: 0; }

.tla-table-wrap { overflow-x: auto; }
.tla-table { width: 100%; border-collapse: collapse; margin: 0; }
.tla-table th, .tla-table td { padding: 8px 10px; border-bottom: 1px solid var(--tla-border); text-align: left; vertical-align: top; }
.tla-table th.tla-num, .tla-table td.tla-num { text-align: right; }
.tla-table thead th { font-size: 0.85em; color: var(--tla-muted); font-weight: 600; }
.tla-actions-cell { text-align: right; }
.tla-kv th { font-weight: normal; }
.tla-monthly td, .tla-monthly th { padding: 6px 8px; }
.tla-cell-pos { color: var(--tla-pos); }
.tla-cell-neg { color: var(--tla-neg); }

.tla-account-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tla-account-title .tla-title { margin: 0; }
.tla-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0; }
.tla-meta div { min-width: 110px; }
.tla-meta dt { font-size: 0.8em; color: var(--tla-muted); margin: 0; }
.tla-meta dd { margin: 0; font-weight: 600; }

.tla-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0 0 16px; }
.tla-tile { border: 1px solid var(--tla-border); border-radius: var(--tla-radius); padding: 12px 14px; }
.tla-tile-label { font-size: 0.8em; color: var(--tla-muted); }
.tla-tile-value { font-size: 1.45em; font-weight: 700; font-variant-numeric: tabular-nums; }
.tla-tile-sub { font-size: 0.8em; color: var(--tla-muted); }
.tla-tone-pos .tla-tile-value { color: var(--tla-pos); }
.tla-tone-neg .tla-tile-value { color: var(--tla-neg); }
.tla-tone-accent { border-color: var(--tla-accent); }

.tla-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; }

.tla-chart-box { position: relative; }
.tla-chart { display: block; width: 100%; height: auto; overflow: visible; }
.tla-chart .tla-grid { stroke: var(--tla-border); stroke-width: 1; }
.tla-chart .tla-zero { stroke: var(--tla-muted); stroke-width: 1; }
.tla-chart .tla-axis { fill: var(--tla-muted); font-size: 11px; }
.tla-chart .tla-value { fill: currentColor; font-size: 11px; font-variant-numeric: tabular-nums; }
.tla-chart .tla-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tla-chart .tla-series-1 { stroke: var(--tla-series-1); }
.tla-chart .tla-series-2 { stroke: var(--tla-series-2); }
.tla-chart .tla-series-1-fill { fill: var(--tla-series-1); }
.tla-chart .tla-series-2-fill { fill: var(--tla-series-2); }
.tla-chart .tla-dot { stroke: #fff; stroke-width: 2; }
.tla-chart .tla-crosshair { stroke: var(--tla-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tla-chart .tla-overlay, .tla-chart .tla-hit { fill: transparent; }
.tla-chart .tla-bar-group:hover .tla-hit { fill: var(--tla-soft); }
.tla-chart .tla-bar-pos { fill: var(--tla-pos); }
.tla-chart .tla-bar-neg { fill: var(--tla-neg); }
.tla-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.87em; margin-bottom: 8px; }
.tla-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tla-series-1-bg, .tla-bar-pos-bg { background: var(--tla-series-1); }
.tla-series-2-bg { background: var(--tla-series-2); }
.tla-bar-neg-bg { background: var(--tla-neg); }
.tla-tooltip { position: absolute; z-index: 5; min-width: 170px; padding: 8px 10px; border-radius: 6px; background: rgba(20, 20, 20, 0.92); color: #fff; font-size: 0.85em; pointer-events: none; }
.tla-tooltip-title { font-weight: 600; margin-bottom: 4px; }
.tla-details { margin-top: 8px; }
.tla-details summary { cursor: pointer; font-size: 0.87em; color: var(--tla-muted); }

.tla-progress { height: 10px; border-radius: 999px; background: var(--tla-soft); border: 1px solid var(--tla-border); overflow: hidden; margin: 10px 0 6px; }
.tla-progress-bar { height: 100%; background: var(--tla-accent); transition: width .4s ease; }

.tla-disclaimer { font-size: 0.9em; font-style: italic; color: var(--tla-muted); border-left: 3px solid var(--tla-border); padding-left: 10px; }
.tla-algorithm { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; line-height: 1.55; padding: 12px; background: var(--tla-soft); border-radius: 6px; overflow-x: auto; }
.tla-locked { border: 1px dashed var(--tla-border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; user-select: none; }
.tla-locked-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tla-lock { fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.tla-locked-body { margin-top: 8px; filter: blur(2px); }
.tla-locked-line { display: block; height: 9px; margin: 6px 0; border-radius: 4px; background: var(--tla-border); }

@media (max-width: 640px) {
	.tla-table-responsive thead { display: none; }
	.tla-table-responsive tr { display: block; border-bottom: 1px solid var(--tla-border); padding: 6px 0; }
	.tla-table-responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
	.tla-table-responsive td::before { content: attr(data-label); color: var(--tla-muted); text-align: left; }
	.tla-table-responsive td.tla-actions-cell::before { content: none; }
	.tla-tiles { grid-template-columns: repeat(2, 1fr); }
}