/* Quantzy's managed algo desk. Content and execution states lead the layout. */
:root { --algo-surface: #fff; --algo-soft: #f1f6f3; --algo-accent: #087d79; --algo-danger: #a52d37; }
body { background: #f7f9f7; }
footer { color: #52685f; }
.header { max-width: 1440px; padding: 20px 40px; background: #fff; }
.header nav { gap: 24px; }
main { max-width: 1440px; padding: 0 40px; }
.algo-app { padding: 40px 0 56px; }
.algo-app h1 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -1.4px; line-height: 1.2; margin: 0 0 12px; }
.algo-app h2 { font-size: 20px; letter-spacing: -.5px; margin: 0 0 16px; }
.algo-app h3 { font-size: 15px; letter-spacing: -.2px; }
.algo-app p { line-height: 1.7; }
.algo-app .eyebrow { font-size: 10px; margin-bottom: 12px; }
.algo-app .panel { background: var(--algo-surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.algo-app .button { border-radius: 8px; padding: 12px 16px; font-size: 13px; background: var(--algo-accent); border-color: var(--algo-accent); box-shadow: none; }
.algo-app .button:hover { background: #065f5c; transform: none; }
.algo-app .button.secondary { background: #fff; color: var(--ink); border-color: var(--border); }
.algo-app .button.secondary:hover { background: var(--algo-soft); }
.algo-app .button.danger { background: var(--algo-danger); border-color: var(--algo-danger); }
.algo-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 32px; }
.algo-heading > div { min-width: 0; }
.algo-heading > div > p:last-child { color: var(--muted); margin: 0; font-size: 14px; max-width: 720px; }
.algo-heading .button { white-space: nowrap; }
.collection-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.algo-explore-layout { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 28px; align-items: start; }
.algo-filters { display: flex; flex-direction: column; gap: 24px; }
.filter-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.filter-title h2 { font-size: 16px; margin: 0; }
.filter-title a { font-size: 12px; }
.algo-app label { font-size: 12px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.algo-app input, .algo-app select { background: #fff; color: var(--ink); font-size: 13px; border: 1px solid #cbd8d2; border-radius: 6px; min-height: 42px; width: 100%; padding: 10px 12px; }
.filter-explainer { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 8px; }
.filter-explainer h3 { line-height: 1.6; margin: 12px 0; }
.filter-explainer p { font-size: 12px; color: var(--muted); margin: 0; }
.algo-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e6f3ed; color: #08705e; font-size: 20px; font-weight: 600; }
.results-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 46px; margin-bottom: 16px; }
.results-toolbar h2 { font-size: 18px; margin: 0; }
.results-toolbar h2 span { font-size: 12px; background: #e8eeeb; padding: 3px 8px; border-radius: 5px; margin-left: 8px; }
.results-toolbar > span { font-size: 11px; color: var(--muted); }
.algo-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.algo-table-head, .algo-result-row { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.65fr) 88px; gap: 16px; padding: 20px; align-items: center; }
.algo-table-head { background: #f0f4f1; color: #52685f; font-size: 11px; padding-top: 14px; padding-bottom: 14px; }
.algo-result-row + .algo-result-row { border-top: 1px solid var(--border); }
.algo-result-row { min-height: 128px; }
.algo-result-row:hover { background: #fcfefc; }
.algo-identity { display: flex; gap: 14px; align-items: center; min-width: 0; }
.algo-identity > div { min-width: 0; }
.algo-identity h3 { margin: 0 0 6px; line-height: 1.45; overflow-wrap: anywhere; }
.algo-identity h3 a { color: var(--ink); }
.algo-identity h3 a:hover { color: var(--brand); text-decoration: underline; }
.algo-identity p { margin: 0; font-size: 12px; color: var(--muted); }
.algo-avatar { width: 40px; height: 44px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; font-weight: 600; border: 1px solid #c7dfd1; border-radius: 10px; background: #e7f2eb; color: #276747; }
.avatar-2 { background: #eef0f8; border-color: #d9dfee; color: #415b81; }
.avatar-0 { background: #f6f0e7; border-color: #e4d8c5; color: #7a5b33; }
.mode-label { display: inline-block; font-size: 10px; color: #52665e; margin-top: 6px; }
.algo-cell { font-size: 12px; color: #344c42; overflow-wrap: anywhere; }
.algo-cell small { display: block; font-size: 10px; color: var(--muted); }
.capital-cell { line-height: 1.65; }
.risk-pill { display: inline-block; border: 1px solid #d8ddd5; border-radius: 5px; background: #f5f6f1; padding: 4px 8px; color: #59634b; font-size: 11px; line-height: 1.5; }
.row-action { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 40px; }
.mobile-label { display: none; }
.algo-footnote { display: flex; gap: 12px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.algo-footnote p { margin: 0; }
.algo-empty { text-align: center; padding: 64px 24px !important; }
.algo-empty h2 { font-size: 25px; margin-top: 20px; }
.algo-empty p { color: var(--muted); max-width: 460px; margin: 0 auto 24px; font-size: 14px; }
.algo-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: 32px; align-items: start; }
.algo-section-nav { display: flex; flex-wrap: wrap; gap: 28px; padding: 0 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.algo-section { padding: 28px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 24px; }
.algo-section .prose { font-size: 14px; }
.algo-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 32px; margin: 24px 0 0; }
.algo-facts > div { display: block; border: 0; padding: 0; }
.algo-facts dt, .cell-caption { font-size: 11px; color: var(--muted); display: block; margin-bottom: 6px; }
.algo-facts dd { margin: 0; color: var(--ink); font-size: 13px; text-align: left; overflow-wrap: anywhere; }
.algo-setup-panel { position: sticky; top: 24px; }
.algo-setup-panel > h2 { margin-top: 16px; }
.algo-setup-panel dl { font-size: 12px; margin: 24px 0; }
.algo-setup-panel dl > div { gap: 16px; }
.algo-setup-panel dd { max-width: 160px; }
.algo-setup-panel > .fine { margin-top: 16px; }
.algo-setup-panel .prose { font-size: 13px; }
.algo-setup-panel > p.muted { font-size: 13px; }
.algo-notice { background: var(--algo-soft); border-left: 3px solid #80b19e; padding: 16px; font-size: 12px; color: #36564a; line-height: 1.7; overflow-wrap: anywhere; margin: 20px 0; }
.supported-brokers { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 24px; }
.supported-brokers h3 { font-size: 12px; }
.supported-brokers p { font-size: 12px; color: var(--muted); margin: 0; }
.centered-copy { text-align: center; }
.evidence-empty { display: flex; align-items: center; gap: 20px; background: var(--algo-soft); border: 1px dashed #ccdad2; border-radius: 8px; padding: 24px; }
.evidence-empty > span { color: #648171; font-size: 30px; }
.evidence-empty h3 { margin-bottom: 8px; }
.evidence-empty p { font-size: 12px; color: #52685f; margin: 0; }
.algo-stats { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--border); background: #fff; border-radius: 12px; }
.algo-stats > div { padding: 20px 24px; }
.algo-stats > div + div { border-left: 1px solid var(--border); }
.algo-stats span { display: block; font-size: 12px; color: var(--muted); }
.algo-stats strong { display: block; font-size: 28px; font-weight: 550; margin-top: 4px; font-variant-numeric: tabular-nums; }
.freshness-note { font-size: 11px; color: var(--muted); margin: 12px 0 24px; }
.my-algo { margin-bottom: 20px; }
.my-algo-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.my-algo-top h2 { margin: 0 0 6px; font-size: 20px; }
.my-algo-top .eyebrow { font-size: 9px; margin-bottom: 8px; }
.my-algo-run { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 20px; align-items: center; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; font-size: 12px; }
.my-algo-run strong { font-weight: 550; }
.run-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; font-size: 11px; border-radius: 6px; background: #edf1ef; color: #52665a; white-space: nowrap; }
.run-status::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.state-running { background: #e7f5ed; color: #23704d; }
.state-unavailable, .state-error, .state-workspace-offline { background: #fff0df; color: #8b5015; }
.state-starting, .state-stopping { background: #edf2fa; color: #365a86; }
.my-algo-no-run { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
.my-algo-no-run p { font-size: 12px; color: var(--muted); margin: 0; }
.setup-divider { border-top: 1px solid var(--border); margin: 24px 0; }
.algo-config-form > p { font-size: 13px; }
.algo-config-form .actions { margin-top: 28px; align-items: center; }
.fixed-settings { display: flex; gap: 16px; align-items: center; background: var(--algo-soft); padding: 20px; border-radius: 8px; }
.fixed-settings > span { font-size: 24px; color: var(--brand); }
.fixed-settings strong { font-size: 13px; }
.fixed-settings p { font-size: 12px; color: #52685f; margin: 4px 0 0; }
.algo-app label.checkbox { flex-direction: row; align-items: flex-start; font-size: 12px; gap: 10px; line-height: 1.7; }
.algo-app .checkbox input { width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; margin-top: 4px; accent-color: var(--brand); }
.deployment-summary { margin-bottom: 24px; }
.deployment-summary .section-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.deployment-summary .section-row a { font-size: 12px; }
.deployment-summary .freshness-note { margin: 0; }
.algo-timeline { list-style: none; padding: 0; margin: 24px 0 0; }
.algo-timeline li { display: flex; gap: 12px; align-items: center; font-size: 12px; border-top: 1px solid #edf1ed; padding: 16px 0; }
.algo-timeline strong { font-weight: 500; }
.algo-timeline time { margin-left: auto; color: var(--muted); font-size: 11px; }
.timeline-dot { width: 6px; height: 6px; border: 1px solid #6a8b7b; border-radius: 50%; }
.algo-app details summary { font-size: 12px; cursor: pointer; }
.algo-app details p { margin: 12px 0; }
@media (max-width: 1100px) {
  .header, main { padding-left: 24px; padding-right: 24px; }
  .algo-explore-layout { grid-template-columns: 200px minmax(0,1fr); gap: 20px; }
  .algo-table-head, .algo-result-row { grid-template-columns: minmax(0,1.8fr) minmax(0,1.2fr) 88px; }
  .algo-table-head > :nth-child(3), .algo-table-head > :nth-child(4) { display: none; }
  .algo-result-row > :nth-child(3), .algo-result-row > :nth-child(4) { grid-row: 2; }
  .algo-result-row > .row-action { grid-column: 3; grid-row: 1 / 3; }
  .algo-detail-layout { grid-template-columns: minmax(0,1fr) 304px; gap: 24px; }
}
@media (max-width: 800px) {
  .header { flex-wrap: wrap; gap: 16px; }
  .header nav { flex-wrap: wrap; gap: 20px; }
  .algo-explore-layout { grid-template-columns: 1fr; }
  .algo-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .filter-title { grid-column: 1 / -1; }
  .filter-explainer { display: none; }
  .algo-filters .button { grid-column: 1 / -1; }
  .algo-detail-layout { grid-template-columns: 1fr; }
  .algo-setup-panel { position: static; }
  .my-algo-run { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .algo-stats > div { padding: 16px; }
  .algo-heading { align-items: flex-start; }
}
@media (max-width: 520px) {
  .header, main { padding-left: 16px; padding-right: 16px; }
  .header { padding-top: 16px; padding-bottom: 16px; }
  .header .brand { font-size: 25px; }
  .header nav { gap: 16px; font-size: 12px; width: 100%; }
  .header nav a, .header nav button { min-height: 44px; display: inline-flex; align-items: center; }
  .algo-app input:not([type="checkbox"]), .algo-app select, .row-action { min-height: 44px; }
  .algo-app { padding-top: 28px; }
  .algo-app .panel { padding: 20px; }
  .algo-heading { flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .algo-heading > div > p:last-child { font-size: 13px; }
  .algo-filters { grid-template-columns: 1fr; gap: 16px; }
  .results-toolbar > span { display: none; }
  .algo-table-head { display: none; }
  .algo-result-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 20px; }
  .algo-result-row .algo-identity { grid-column: 1 / -1; }
  .algo-result-row .capital-cell { grid-column: 1 / -1; }
  .algo-result-row > :nth-child(3), .algo-result-row > :nth-child(4) { grid-row: auto; }
  .algo-result-row > .row-action { grid-column: 1 / -1; grid-row: auto; justify-content: center; border: 1px solid var(--border); border-radius: 6px; }
  .mobile-label { display: block; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
  .algo-stats { grid-template-columns: 1fr 1fr; }
  .algo-stats > div:nth-child(3) { border-left: 0; }
  .algo-stats > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .algo-stats span { font-size: 11px; }
  .my-algo-top, .my-algo-no-run { align-items: flex-start; flex-direction: column; }
  .my-algo-top .button { width: 100%; }
  .my-algo-run { gap: 20px 12px; }
  .my-algo-run .row-action { justify-content: flex-start; }
  .algo-facts { gap: 20px 16px; }
  .algo-timeline li { flex-wrap: wrap; }
  .algo-timeline time { margin-left: 18px; width: 100%; }
  .algo-app .grid-two { grid-template-columns: 1fr; }
  .evidence-empty { align-items: flex-start; padding: 20px; }
  .algo-config-form .actions { flex-direction: column; align-items: stretch; }
  .algo-config-form .actions .fine { text-align: center; }
  .algo-section-nav { gap: 20px; font-size: 12px; }
  footer { flex-wrap: wrap; gap: 16px; padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) { .algo-app *, .algo-app *::before { transition: none !important; animation: none !important; } }