/* Options Lab visual language. Preserve analytics layouts and canvas dimensions. */
:root, :root[data-theme="dark"] {
  --bg: #141414; --bg-grid: none;
  --surface: #1b1b1b; --surface-2: #1b1b1b; --surface-soft: #202020; --surface-raised: #262626;
  --text: #f2f2ef; --muted: #a5a5a0; --slate: #c4c4bf;
  --border: #30302f; --border-strong: #50504c;
  --accent: #89baff; --accent-2: #89baff; --accent-text: #b4d2ff; --accent-soft: #223047;
  --green: #85d5b1; --green-text: #85d5b1; --green-soft: #1c3027;
  --red: #ff9696; --red-text: #ff9696; --red-soft: #352323;
  --orange: #eac481; --orange-text: #eac481; --orange-soft: #302a20;
  --blue: var(--accent); --blue-soft: var(--accent-soft); --ink-soft: var(--slate);
  --shadow: none; --shadow-soft: none; --ring: 0 0 0 2px var(--accent);
  --font-ui: "Golos Text", system-ui, sans-serif;
  --font-num: "Golos Text", system-ui, sans-serif;
  --chart-grid: #30302f; --chart-muted: #a5a5a0;
  --chart-accent: #89baff; --chart-accent-rgb: 137, 186, 255;
  --chart-benchmark: #a5a5a0; --chart-negative: #ff9696; --chart-negative-rgb: 255, 150, 150;
  --chart-warning: #eac481; --chart-warning-rgb: 234, 196, 129;
  --chart-warning-text: #20221f; --chart-panel-bg: #eac481;
}
:root[data-theme="light"] {
  --bg: #f7f7f5; --bg-grid: none;
  --surface: #fff; --surface-2: #fff; --surface-soft: #f2f2ef; --surface-raised: #fff;
  --text: #20221f; --muted: #676b65; --slate: #4c514a;
  --border: #dedfd9; --border-strong: #b7bbb2;
  --accent: #275da8; --accent-2: #275da8; --accent-text: #275da8; --accent-soft: #e7eef8;
  --green: #20704c; --green-text: #20704c; --green-soft: #e6f2ea;
  --red: #b83434; --red-text: #b83434; --red-soft: #f8e9e7;
  --orange: #986411; --orange-text: #986411; --orange-soft: #f6eedf;
  --chart-grid: #dedfd9; --chart-muted: #676b65;
  --chart-accent: #275da8; --chart-accent-rgb: 39, 93, 168;
  --chart-benchmark: #878d83; --chart-negative: #b83434; --chart-negative-rgb: 184, 52, 52;
  --chart-warning: #986411; --chart-warning-rgb: 152, 100, 17;
  --chart-panel-bg: #f6eedf;
}
*, *::before, *::after { letter-spacing: 0; }
body { font-family: var(--font-ui); font-size: 14px; font-weight: 400; background: var(--bg); }
button, input, select { font-family: var(--font-ui); }
strong, td, dd { font-variant-numeric: tabular-nums; }
.app-header { background: var(--bg); backdrop-filter: none; box-shadow: none; padding: 16px 32px; }
.main-nav { font-size: 13px; }
.main-nav a { color: var(--muted); }
.main-nav a:hover { color: var(--text); }
.brand-caption { font-size: 11px; }
.theme-toggle, .theme-toggle-track { box-shadow: none; background: var(--surface-soft); }
main { max-width: 1760px; padding: 28px 32px; }
.dashboard-shell { padding: 0; border: 0; border-radius: 0; background: none; }
.page-intro { margin-bottom: 32px; align-items: center; }
h1 { font-size: 30px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 21px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
.intro-copy { font-size: 14px; max-width: 740px; }
.eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }
.intro-highlights span { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--muted); font-size: 11px; }
.intro-highlights { gap: 18px; }
.panel, .content-section, .info-block { border: 0; border-radius: 0; box-shadow: none; background: none; }
.panel { padding: 0; }
.content-section { padding: 28px 0; margin-top: 28px; border-top: 1px solid var(--border); }
.info-block { padding: 24px 0; border-top: 1px solid var(--border); }
.info-block::before { display: none; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr) 296px; gap: 32px; }
.risk-panel { padding-left: 24px; border-left: 1px solid var(--border); }
.risk-panel h2 { font-size: 20px; }
.panel-heading, .section-heading { margin-bottom: 20px; }
.canvas-wrap { border: 0; border-radius: 0; background: transparent; }
.chart-tooltip { border-radius: 6px; box-shadow: 0 4px 20px #0002; }
.button, .filter, .risk-switch button, select, input, .check-control, .segmented { border-radius: 6px; box-shadow: none; }
.button { font-size: 13px; min-height: 40px; }
.button.primary, .button.primary:hover { background: var(--text); color: var(--bg); box-shadow: none; border-color: var(--text); }
.button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.button:hover, .data-source-card:hover, .trade-card:hover, .version-card:hover, .strategy-recent-card:hover { transform: none; box-shadow: none; }
.risk-switch button { background: var(--surface-soft); padding: 12px; }
.risk-switch button.active, .segmented button.active, .filter.active { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: none; }
.risk-switch button.active span { color: var(--bg); }
.risk-note { background: var(--orange-soft); border: 0; border-left: 2px solid var(--orange); border-radius: 0; font-size: 12px; }
.kpi-grid { gap: 0; border-block: 1px solid var(--border); margin-top: 28px; }
.kpi-card, .kpi-card:nth-child(2), .kpi-card:nth-child(4) { padding: 20px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.kpi-card + .kpi-card { border-left: 1px solid var(--border); }
.kpi-card strong { font-size: 28px; font-weight: 600; }
.kpi-card span, .kpi-card small { font-size: 12px; }
.data-package-card, .data-source-card, .version-card, .process-card,
.strategy-summary-card, .strategy-recent-card, .strategy-detail, .methodology-strip article {
  border-radius: 6px; box-shadow: none; background: var(--surface); border-color: var(--border);
}
.methodology-strip article:nth-child(n), .process-card.accent { background: var(--surface-soft); }
.data-package-card { background: var(--surface-soft); }
.data-status-line { border-radius: 6px; background: var(--surface-soft); border-color: var(--border); }
.strategy-detail-chart, .table-wrap { border-radius: 0; background: none; }
table { font-size: 13px; }
thead th { background: var(--surface-soft); font-size: 11px; color: var(--muted); }
.lower-grid { gap: 32px; }
.drawdown-insight, .portfolio-action-card, .portfolio-state-card, .closing-health,
.closing-health-metrics, .closing-health-verdict, .action-next, .zone-evidence article {
  border-radius: 6px; box-shadow: none;
}
.closing-health-heading strong { font-size: 17px; }
.closing-health-verdict p, .closing-health-metrics small, .closing-health-details,
.portfolio-state-details, .portfolio-state-card small, .zone-evidence small { font-size: 12px; }
.closing-health-metrics strong { font-size: 20px; }
.trade-journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trade-card { border-radius: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: none; min-width: 0; }
.trade-card-header { align-items: start; gap: 12px; }
.trade-card-header h3 { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.trade-date { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }
.trade-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.trade-card-meta > span { background: none; border: 0; padding: 0; font-size: 12px; }
.trade-card .trade-links { margin-top: 18px; }
.trade-links a { border-radius: 4px; box-shadow: none; }
.journal-archive { margin-top: 24px; border-top: 1px solid var(--border); }
.journal-archive summary { padding: 18px 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--accent); }
.journal-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; padding-top: 24px; }
.journal-pagination button { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 20px; }
.journal-pagination button:disabled { opacity: .35; cursor: default; }
.journal-pagination span { min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
@media (max-width: 1200px) {
  .app-header { grid-template-columns: auto 1fr; gap: 12px; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trade-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  main { padding: 24px 18px; }
  .app-header { padding: 12px 18px; position: relative; }
  .brand { min-width: 0; } .brand-caption { display: none; }
  .header-status { flex-wrap: wrap; white-space: normal; }
  .page-intro, .section-heading.split, .panel-heading { flex-direction: column; align-items: stretch; }
  h1 { font-size: 26px; }
  .dashboard-grid, .lower-grid { grid-template-columns: minmax(0, 1fr); }
  .risk-panel { border-left: 0; border-top: 1px solid var(--border); padding: 24px 0 0; }
  .trade-journal-grid { grid-template-columns: minmax(0, 1fr); }
  .trade-card { padding: 18px; }
  .kpi-card strong { font-size: 23px; }
  .kpi-card { padding: 16px 12px; }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-mark { width: 118px; }
  .header-status > .muted { display: none; }
}


/* Total-specific layouts keep their existing chart geometry and calculation controls. */
:root, :root[data-theme="dark"] {
  --header-bg: var(--bg); --shadow-header: none; --shadow-panel: none;
  --mono: var(--font-num);
  --accent-border: var(--border-strong);
  --warning-border: var(--border); --warning-soft: var(--orange-soft);
  --chart-positive-rgb: 133, 213, 177;
  --chart-live: #a1a796; --chart-drawdown: #88b1ac;
  --chart-drawdown-rgb: 136, 177, 172;
  --chart-zone-fill: rgba(161,167,150,.07);
  --chart-zone-border: rgba(161,167,150,.35);
}
:root[data-theme="light"] {
  --chart-positive-rgb: 32, 112, 76;
  --chart-live: #747e6b; --chart-drawdown: #487f7a;
  --chart-drawdown-rgb: 72, 127, 122;
  --chart-zone-fill: rgba(116,126,107,.07);
  --chart-zone-border: rgba(116,126,107,.35);
}
:root[data-theme] {
  --font-ui: "Golos Text", system-ui, sans-serif;
  --font-num: "Golos Text", system-ui, sans-serif;
  --mono: var(--font-num);
}
:root[data-theme] .button.primary { box-shadow: none; background: var(--text); color: var(--bg); }
:root[data-theme] .m2-optimizer-metrics div { border: 0; border-bottom: 1px solid var(--border); }
.brand-mark { width: 38px; height: 38px; }
.brand-caption { display: grid; }
.brand-mark:has(img[alt*="Robot"]) { width: 126px; height: 42px; }
.risk-note { color: var(--orange-text); }
.app-header { position: relative; }
.m2-total-workspace, .solution-detail-page { width: min(100%, 1600px); padding: 28px 0 64px; }
.portfolio-advisor-shell { width: min(1400px, calc(100% - 48px)); padding-top: 28px; }
.m2-total-intro, .solution-page-intro { padding: 0 0 28px; }
.m2-total-intro h1, .solution-page-intro h1, .advisor-intro h1 { font-size: 30px; }
.m2-tab-nav { top: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--bg); box-shadow: none; backdrop-filter: none; padding: 8px 0; gap: 6px; }
.m2-tab-nav button { min-height: 40px; font-weight: 500; }
.m2-tab-nav button.active, .solution-mode-switch button.active, .advisor-segmented button.active {
  background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: none;
}
.m2-insight-strip { gap: 0; border-block: 1px solid var(--border); }
.m2-insight-card, .m2-insight-card:hover { border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; padding: 20px 16px; }
.m2-insight-card + .m2-insight-card { border-left: 1px solid var(--border); }
.m2-insight-card strong, .m2-weight-grid input, .m2-total-metrics .metric-list strong,
.m2-total-kpi-grid strong, .m2-total-components td:not(:first-child),
.m2-optimizer-head h3, .m2-optimizer-metrics strong, .correlation-matrix span,
.m2-stress-impact strong, .m2-topup-zones strong, .m2-topup-status strong,
.solution-profile-list dd, .solution-risk-metrics strong, .solution-kpi-grid strong {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.m2-weight-panel { border: 0; border-block: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; padding: 24px 0; }
.m2-total-layout, .solution-dashboard-grid { gap: 32px; grid-template-columns: minmax(0, 1fr) 296px; }
.m2-total-layout { grid-template-columns: minmax(0, 1fr); }
.m2-total-chart-panel, .m2-total-metrics, .m2-total-components, .m2-analytics-grid > .panel,
.m2-stress-panel, .m2-topup-panel, .m2-optimizer-panel, .solution-primary-chart,
.solution-profile-panel, .advisor-chart-panel {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.m2-total-metrics, .solution-profile-panel { padding-left: 24px; border-left: 1px solid var(--border); }
.m2-total-drawdown-chart .canvas-wrap, .solution-comparison-wrap { background: transparent; border: 0; border-radius: 0; }
.m2-total-components, .m2-analytics-grid { margin-top: 28px; }
.m2-total-monthly { margin-top: 28px; padding: 24px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.m2-total-monthly .heatmap { overflow-x: auto; }
.m2-total-history-grid { margin-top: 28px; align-items: start; }
.m2-total-history-grid.active { display: grid; }
.m2-total-history-grid .m2-total-monthly { margin-top: 0; padding-top: 0; }
.m2-total-inline-drawdown .canvas-wrap { min-height: 300px; }
.solution-chart-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.solution-chart-controls .check-control { min-height: 40px; }
.custom-period-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.custom-period-controls[hidden] { display: none; }
.custom-period-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.custom-period-controls input { min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-soft); color: var(--text); }
.m2-total-kpi-grid, .solution-kpi-grid { gap: 0; border-block: 1px solid var(--border); }
.m2-optimizer-card, .m2-stress-card, .advisor-choice, .advisor-entry-grid article { border-radius: 6px; box-shadow: none; background: var(--surface); }
.m2-optimizer-metrics div, .m2-optimizer-weights span { background: none; border-radius: 0; }
.m2-history-note, .solution-benchmark-summary { background: none; border: 0; border-left: 2px solid var(--border-strong); border-radius: 0; }
.solution-risk-summary, .solution-risk-metrics, .solution-risk-note { box-shadow: none; border-radius: 6px; }
.advisor-question-panel, .advisor-result-panel, .advisor-entry-section, .advisor-nonmarket-section, .advisor-rationale {
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.advisor-summary-grid article, .advisor-nonmarket-summary article { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.advisor-question-panel h2, .advisor-result-empty h2 { font-size: 23px; }
.advisor-allocation-list article { border-radius: 0; background: none; border: 0; border-bottom: 1px solid var(--border); }
.advisor-entry-grid article p, .advisor-entry-grid dt, .advisor-entry-grid dd,
.advisor-allocation-main small, .advisor-allocation-money span, .advisor-nonmarket-summary small { font-size: 12px; }
.intro-highlights { gap: 16px; }
.intro-highlights span { background: none; border: 0; padding: 0; font-weight: 500; }
button, input, select { max-width: 100%; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.solution-minimum-strip span { white-space: normal; }
@media (max-width: 980px) {
  .m2-total-layout, .solution-dashboard-grid { grid-template-columns: minmax(0,1fr); }
  .m2-total-metrics, .solution-profile-panel { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .solution-dashboard-grid > .solution-primary-chart { grid-row: 1; }
  .solution-dashboard-grid > .solution-profile-panel { grid-row: 2; }
  .intro-highlights { flex-direction: row; align-items: baseline; gap: 8px 16px; }
  .intro-highlights span { width: auto; min-height: 0; text-align: left; }
  body[data-page="total"] > main { padding: 0 18px; }
  .m2-total-intro h1, .solution-page-intro h1, .advisor-intro h1 { font-size: 26px; }
  .solution-chart-controls { justify-content: flex-start; }
  .solution-chart-controls .m2-benchmark-select { width: 100%; }
  .custom-period-controls > * { width: 100%; }
  .m2-insight-card { padding: 16px 12px; }
  .m2-tab-nav { position: relative; flex-wrap: wrap; }
  .m2-total-workspace, .solution-detail-page { padding-top: 24px; }
  .brand-mark { width: 38px; }
  .advisor-intro, .advisor-result-head { gap: 18px; }
}