/* SPYLab research workspace. Keep the existing backtest controls readable. */
:root {
  --lab-soft: #f7f9fc;
  --lab-blue-soft: #edf2fc;
  --lab-success: #3e7058;
}

.sidebar { width: 220px; padding: 30px 16px 22px; }
.brand { padding: 0 8px; gap: 10px; font-size: 25px; letter-spacing: -.6px; }
.brand-mark { width: 42px; height: 44px; flex: 0 0 42px; }
.brand > span:last-child { display: block; }
.brand-en { margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: .3px; }
.sidebar-label { display: block; margin-top: 40px; }
.sidebar nav { display: grid; gap: 7px; margin-top: 0; }
.sidebar .nav-item { display: flex; min-height: 46px; padding: 12px; gap: 10px; font-size: 14px; white-space: nowrap; }
.sidebar .nav-item svg { flex: 0 0 19px; width: 19px; height: 19px; }
.sidebar .nav-item.active .nav-dot { display: block; }
.sidebar .nav-item:not(.active) .nav-dot { display: none; }
.sidebar .nav-item:hover { background: #f4f6fa; }
.sidebar .nav-item.active:hover { background: var(--lab-blue-soft); }
.sidebar-footer { display: block; padding: 24px 6px 0; }
.sidebar-footer > div { margin-left: 0; }
.sidebar-footer .sidebar-tools { display: grid; gap: 10px; padding-bottom: 20px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.sidebar-tools button { padding: 0; text-align: left; font-size: 12px; color: #526176; }
.sidebar-tools button:hover { color: var(--accent); }
main { margin-left: 220px; min-width: 0; }
.skip { left: 236px; }
.breadcrumb #routeLabel { color: #40536f; padding: 0; }
.page-heading { gap: 20px; padding: 26px 0 24px; }
.page-heading h1 { font-size: 27px; line-height: 1.35; }
.page-heading .brand-subtitle { margin-top: 7px; font-size: 12px; letter-spacing: .15px; color: #6c7a8d; }
.page-heading p:last-child { margin-top: 9px; }
.research-workflow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: #94a1b4; font-size: 12px; }
.research-workflow button { padding: 7px 6px; border-radius: 6px; font-size: 12px; color: #526683; white-space: nowrap; }
.research-workflow button:hover { background: #eaf0f9; color: #3158b3; }
.lab-view, .lab-view > *, .lab-grid > *, .lab-card, .lab-card-head > *, .lab-form-grid > *, .lab-field { min-width: 0; }
.lab-view { width: 100%; }
.lab-details { margin-top: 18px; font-size: 13px; color: var(--muted); }
.lab-details summary { cursor: pointer; color: #3d567b; }
.lab-field { font-size: 13px; }
.lab-inline-error { scroll-margin-top: 20px; }
.experiment-bar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 18px; padding: 16px 18px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.experiment-name { flex: 1 1 250px; max-width: 410px; }
.experiment-bar .lab-actions { min-height: 40px; }
.experiment-bar .experiment-helper { flex: 1 1 180px; margin: 0; align-self: center; font-size: 12px; text-align: right; }
.toast { left: calc(50% + 110px); }

.lab-page-intro { display: block; margin: 0 0 20px; }
.lab-page-intro h1, .lab-page-intro h2 { margin: 0 0 7px; font-size: 21px; line-height: 1.45; font-weight: 650; }
.lab-page-intro p { max-width: 760px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.lab-page-intro .lab-label { margin: 0 0 6px; font-size: 12px; }
.lab-page-intro .lab-note { max-width: none; margin-top: 14px; font-size: 13px; }
.lab-page-intro .lab-actions { margin-top: 12px; }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 20px; align-items: start; }
.lab-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lab-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lab-grid > .full, .lab-grid > .lab-full { grid-column: 1 / -1; }
.lab-card { margin-bottom: 20px; padding: 21px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.lab-grid > .lab-card { margin-bottom: 0; }
.lab-card h2 { margin: 0 0 10px; color: #2e4566; font-size: 17px; font-weight: 650; line-height: 1.5; }
.lab-card h3 { margin: 18px 0 9px; color: #354b6b; font-size: 14px; line-height: 1.6; font-weight: 600; }
.lab-card > h3:first-child { margin-top: 0; }
.lab-card p { margin: 8px 0 12px; font-size: 13px; line-height: 1.85; }
.lab-card p:last-child { margin-bottom: 0; }
.lab-card ul, .lab-card ol { padding-left: 20px; margin: 10px 0; color: #526176; font-size: 13px; line-height: 1.85; }
.lab-card li + li { margin-top: 7px; }
.lab-card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.lab-card-head h2, .lab-card-head h3, .lab-card-head p { margin: 0; }
.lab-card-head h2 { color: #2e4566; font-size: 17px; font-weight: 650; line-height: 1.5; }
.lab-card-head p { margin-top: 5px; }
.lab-muted { color: var(--muted); font-size: 13px; line-height: 1.8; }
.lab-label { display: block; margin-bottom: 5px; color: #61718b; font-size: 12px; line-height: 1.6; }
.lab-card .lab-label, .lab-card-head .lab-label { margin: 0 0 6px; font-size: 12px; }
.lab-stat { display: block; color: #2f476b; font-size: 24px; font-weight: 650; line-height: 1.4; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.lab-stat small { font-size: 12px; font-weight: 400; letter-spacing: 0; }
.lab-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.lab-button, .lab-download { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 39px; padding: 8px 13px; border: 1px solid #cbd6e5; border-radius: 7px; background: #fff; color: #3d567b; font-size: 13px; font-weight: 500; line-height: 1.55; text-align: center; text-decoration: none; cursor: pointer; }
.lab-button:hover:not(:disabled), .lab-download:hover { border-color: #99afd3; background: #f6f9ff; }
.lab-button.primary, .lab-download.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.lab-button.primary:hover:not(:disabled), .lab-download.primary:hover { border-color: #264ba9; background: #264ba9; }
.lab-button:disabled { opacity: .48; }
.lab-button.danger { color: #9d4e45; border-color: #e0c7c2; }
.lab-grid > .lab-download { align-items: flex-start; justify-content: flex-start; flex-direction: column; padding: 15px 17px; text-align: left; }
.lab-grid > .lab-download strong { font-size: 14px; font-weight: 600; }
.lab-grid > .lab-download span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.lab-field { display: flex; flex-direction: column; gap: 6px; }
.lab-field > label, .lab-field > .lab-label { margin: 0; color: #425672; font-size: 13px; font-weight: 500; }
.lab-field input:not([type="checkbox"]):not([type="radio"]), .lab-field select, .lab-field textarea { width: 100%; min-width: 0; min-height: 40px; padding: 9px 11px; border: 1px solid #ccd5e1; border-radius: 7px; background: #fff; color: #243247; font: inherit; font-size: 13px; line-height: 1.5; }
.lab-field input[type="file"] { min-height: 43px; padding: 6px; font-size: 12px; color: var(--muted); }
.lab-field input[type="file"]::file-selector-button { margin-right: 10px; padding: 5px 9px; border: 0; border-radius: 4px; background: #edf2fc; color: #3d567b; font: inherit; cursor: pointer; }
.lab-field input[type="checkbox"], .lab-field input[type="radio"] { accent-color: var(--accent); }
.lab-field textarea { min-height: 100px; resize: vertical; }
.lab-field input::placeholder, .lab-field textarea::placeholder { color: #8a96a7; }
.lab-field small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; }
.lab-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.lab-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lab-form-grid .full { grid-column: 1 / -1; }
.lab-status { padding: 12px 15px; margin: 0 0 18px; border: 1px solid #cad8ef; border-radius: 8px; background: #f0f5fd; color: #3b5b8a; font-size: 13px; line-height: 1.8; }
.lab-status.success { border-color: #cddfd4; background: #f0f7f2; color: #3e7058; }
.lab-status.warning { border-color: #e8d9b6; background: #fffaf0; color: #806127; }
.lab-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.lab-summary-grid > * { min-width: 0; padding: 14px 16px; border: 1px solid #e1e7ef; border-radius: 8px; background: #f8fafd; }
.lab-summary-grid p { margin: 5px 0 0; }
.lab-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin: 14px 0; border: 1px solid #e0e6ef; border-radius: 8px; }
.lab-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; line-height: 1.75; }
.lab-table caption { padding: 10px 13px; border-bottom: 1px solid #e0e6ef; background: #fff; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: left; }
.lab-table th { padding: 10px 13px; border-bottom: 1px solid #e0e6ef; background: #f6f8fb; color: #526176; font-size: 12px; font-weight: 600; vertical-align: top; white-space: nowrap; }
.lab-table td { padding: 11px 13px; border-bottom: 1px solid #edf0f5; color: #40516a; vertical-align: top; font-variant-numeric: tabular-nums; }
.lab-table tbody tr:last-child td { border-bottom: 0; }
.lab-table tbody tr:hover { background: #fbfcfe; }
.lab-table code { font-size: 12px; white-space: nowrap; }
.lab-note { padding: 12px 15px; margin: 15px 0; border-left: 3px solid #9cb1d8; border-radius: 0 7px 7px 0; background: #f1f5fb; color: #526580; font-size: 13px; line-height: 1.85; }
.lab-note p { margin: 0; }
.lab-note p + p { margin-top: 8px; }
.lab-note.warning { border-left-color: #d6b46c; background: #fff9ed; color: #7b6235; }
.lab-role-number { display: inline-flex; flex: 0 0 30px; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: #eaf0fa; color: #40609b; font-size: 13px; font-weight: 600; }
.lab-feature-code { padding: 3px 6px; border-radius: 4px; background: #edf2f9; color: #405d89; font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.lab-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 15px 0; }
.lab-card ol.lab-timeline { list-style: none; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lab-card ol.lab-timeline li { margin-top: 0; }
.lab-timeline > * { min-width: 0; padding: 15px; border-top: 3px solid #9eb4d7; border-radius: 3px 3px 7px 7px; background: #f5f8fc; }
.lab-timeline > :nth-child(2) { border-top-color: #beab82; }
.lab-timeline > :nth-child(3) { border-top-color: #7ea48e; }
.lab-timeline h3, .lab-timeline h4 { margin: 0 0 5px; font-size: 14px; }
.lab-timeline p { font-size: 12px; }
.lab-empty { padding: 48px 24px; text-align: center; border: 1px dashed #cdd8e8; border-radius: 10px; background: #fff; }
.lab-empty h2, .lab-empty h3 { margin: 0 0 10px; color: #405675; font-size: 17px; font-weight: 600; }
.lab-empty p { max-width: 560px; margin: 0 auto 16px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.lab-empty .lab-actions { justify-content: center; }
.lab-history-list { display: grid; gap: 16px; }
.lab-history-card { min-width: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lab-history-card h3 { margin: 0 0 6px; color: #344d70; font-size: 16px; font-weight: 600; }
.lab-history-card p { margin: 7px 0; font-size: 13px; }
.lab-history-card .lab-actions { margin-top: 15px; }
.lab-prob-chart { width: 100%; min-width: 0; margin: 16px 0 8px; overflow-x: auto; }
.lab-prob-chart svg { display: block; width: 100%; height: auto; min-height: 160px; overflow: visible; }
.lab-prob-chart text { font-family: inherit; font-size: 12px; }
.lab-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid #dbe4f1; border-radius: 5px; background: #f0f4fa; color: #556b8b; font-size: 12px; font-weight: 400; line-height: 1.65; white-space: nowrap; }
.lab-badge.success { border-color: #d4e3d9; background: #edf6f0; color: #447359; }
.lab-badge.warning { border-color: #e9dcc0; background: #fff8eb; color: #8b6b31; }
.lab-inline-error { margin: 12px 0; padding: 11px 13px; border: 1px solid #ecd6d2; border-radius: 7px; background: #fff6f4; color: #9f5148; font-size: 13px; line-height: 1.8; }
.lab-upload { display: block; padding: 18px; border: 1px dashed #b6c7e0; border-radius: 9px; background: #f8faff; color: #4c6387; font-size: 13px; line-height: 1.8; }
.lab-upload input[type="file"] { display: block; width: 100%; max-width: 100%; margin-top: 10px; font-size: 12px; }
.lab-upload:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (min-width: 1600px) {
  .page-heading { padding-top: 30px; padding-bottom: 28px; }
  .lab-card { padding: 24px; }
}

@media (max-width: 1250px) {
  .page-heading { flex-wrap: wrap; }
  .research-workflow { margin-left: -6px; }
  .lab-grid.three, .lab-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experiment-bar .experiment-helper { flex: 1 1 100%; text-align: left; margin-top: -3px; }
}

@media (max-width: 1080px) {
  .sidebar { position: static; width: 100%; height: auto; padding: 16px 22px 10px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 15px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { justify-content: flex-start; padding: 0; gap: 10px; font-size: 23px; }
  .brand > span:last-child { display: block; font-size: 23px; letter-spacing: -.5px; }
  .brand-mark { width: 36px; height: 38px; flex-basis: 36px; border-radius: 9px; }
  .brand-mark svg { width: 29px; }
  .brand-en { margin-top: 3px; font-size: 12px; letter-spacing: .2px; }
  .sidebar-label, .sidebar-footer { display: none; }
  .sidebar nav { display: flex; flex: 1 0 100%; width: 100%; max-width: 100%; gap: 6px; margin: 0; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; }
  .sidebar .nav-item { display: flex; width: auto; flex-shrink: 0; min-height: 40px; padding: 9px 13px; gap: 7px; font-size: 13px; }
  .sidebar .nav-item svg { width: 17px; height: 17px; flex-basis: 17px; }
  .sidebar .nav-item.active .nav-dot { display: none; }
  main { margin-left: 0; padding: 0 22px 28px; }
  .skip { left: 22px; }
  .toast { left: 50%; }
  .page-heading { flex-wrap: nowrap; }
  .lab-page-intro { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 820px) {
  .sidebar { padding: 15px 18px 9px; }
  main { padding: 0 18px 26px; }
  .topbar { height: 48px; }
  .page-heading { padding: 22px 0; flex-wrap: wrap; gap: 12px; }
  .page-heading h1 { font-size: 25px; }
  .page-heading .brand-subtitle { font-size: 12px; }
  .research-workflow { width: 100%; }
  .experiment-bar { padding: 15px; gap: 12px; }
  .experiment-name { flex-basis: 100%; max-width: none; }
  .experiment-bar .experiment-helper { margin: 0; }
  .lab-grid, .lab-grid.three, .lab-grid.four { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
  .lab-card { padding: 18px; margin-bottom: 16px; }
  .lab-card-head { gap: 9px; }
  .lab-page-intro h1, .lab-page-intro h2 { font-size: 20px; }
  .lab-page-intro p { font-size: 13px; }
  .lab-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-summary-grid > * { padding: 12px; }
  .lab-stat { font-size: 23px; }
  .lab-form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-timeline, .lab-card ol.lab-timeline { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lab-timeline > * { border-top: 0; border-left: 3px solid #9eb4d7; border-radius: 0 7px 7px 0; }
  .lab-timeline > :nth-child(2) { border-left-color: #beab82; }
  .lab-timeline > :nth-child(3) { border-left-color: #7ea48e; }
  .lab-timeline p { margin: 5px 0 0; }
  .lab-history-card { padding: 18px; }
  .lab-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .lab-field select, .lab-field textarea { min-height: 44px; font-size: 16px; }
  .lab-button, .lab-download { min-height: 42px; }
  .lab-table th, .lab-table td { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .sidebar { padding-left: 14px; padding-right: 14px; }
  main { padding-left: 14px; padding-right: 14px; }
  .topbar .breadcrumb, .topbar .text-button { font-size: 12px; }
  .breadcrumb span { padding-left: 5px; padding-right: 5px; }
  .page-heading .brand-subtitle { max-width: 290px; }
  .lab-form-grid, .lab-form-grid.three { grid-template-columns: minmax(0, 1fr); }
  .lab-card { padding: 16px; }
  .lab-card-head .lab-actions { width: 100%; }
  .lab-summary-grid { gap: 9px; }
  .lab-stat { font-size: 21px; }
  .lab-empty { padding: 32px 18px; }
  .lab-table { min-width: 480px; }
}

@media print {
  body { background: #fff; font-size: 12px; }
  .sidebar, .topbar, .skip, .research-workflow, .experiment-bar, .run-area, .lab-actions, .toast, .download-button, .link-button, dialog { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; }
  .page-heading { padding: 0 0 18px; }
  .page-heading h1 { font-size: 23px; }
  .workspace { display: block; }
  .setup { display: none; }
  .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel, .lab-card, .lab-history-card, .metric-card { box-shadow: none; break-inside: avoid; }
  .lab-table-wrap, .table-scroll { overflow: visible; }
  .lab-table, .results-table { min-width: 0; font-size: 11px; }
  .lab-table th, .lab-table td, .results-table th, .results-table td { font-size: 11px; padding: 7px; }
  .lab-prob-chart svg { min-height: 0; }
  .lab-note, .lab-status { break-inside: avoid; }
}