/* Halaman backtest: formulir di kiri, hasil di kanan (memakai token warna dari style.css). */
.btlayout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .btlayout { grid-template-columns: minmax(0, 1fr); } }
.btform { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 24px); overflow-y: auto; }
@media (max-width: 960px) { .btform { position: static; max-height: none; } }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.fld select, .fld input { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px; color: var(--ink); min-width: 0; width: 100%; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0; min-width: 0; }
legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.facts { display: flex; flex-direction: column; gap: 6px; }
.fgroup { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fgroup .label-sm { width: 100%; margin: 4px 0 0; }
.chk { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: var(--panel2); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.mini { padding: 3px 10px; font-size: 11px; }
.results { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.kpi { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--panel2); }
.klabel { font-size: 11.5px; color: var(--muted); }
.kval { font-size: 19px; font-weight: 650; }
.ksub { font-size: 11px; color: var(--muted); }
.eqchart { height: 300px; margin-bottom: 14px; }
.pxchart { height: 380px; }
.glossary { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 8px 16px; font-size: 12.5px; margin: 0; }
.glossary dt { font-weight: 650; }
.glossary dd { margin: 0; color: var(--muted); }
@media (max-width: 600px) { .glossary { grid-template-columns: minmax(0, 1fr); } .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
h1 .badge { vertical-align: middle; font-size: 11px; }
p.warnbox { margin: 0 0 10px; }