.sim-head { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.sim-head h1 { margin: 0; font-size: 20px; }
.sim-head .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.sim { display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.panel { background: var(--panel); border-right: 1px solid var(--line); padding: 14px; overflow-y: auto; }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 4px 0 10px; }
.panel section { margin-bottom: 20px; }

.summary { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 13px; }
.summary .muted, .muted { color: var(--muted); }
.row { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.btn { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600;
  border-radius: 8px; padding: 11px; font-size: 14px; cursor: pointer; width: 100%; }
details { margin-top: 8px; } details summary { color: var(--muted); cursor: pointer; font-size: 13px; }
textarea { width: 100%; background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; font: 12px/1.4 ui-monospace, monospace; margin: 8px 0; }

.grid { display: flex; flex-direction: column; gap: 9px; }
.ctl { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 8px; }
.ctl label { color: var(--muted); font-size: 13px; }
.ctl input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; width: 100%; font-size: 13px; }
.ctl input:focus { outline: none; border-color: var(--accent); }

.hint { color: var(--accent2); font-size: 12px; margin: -3px 0 4px; line-height: 1.35; }
.hint b { color: var(--ink); }
.prog-wrap { margin: 10px 0; }
.bar { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; height: 10px; overflow: hidden; }
.fill { background: var(--accent); height: 100%; width: 0; transition: width .1s; }
.prog-label { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
#dl-csv { width: 100%; margin-top: 10px; }

.stage { padding: 18px; overflow-y: auto; }
.placeholder { color: var(--muted); text-align: center; margin-top: 80px; font-size: 15px; }
.opt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.opt-card h3 { margin: 0 0 10px; font-size: 15px; }
#opt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#opt-table th, #opt-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
#opt-table th { color: var(--muted); font-weight: 600; }
.note { color: var(--muted); font-size: 12px; margin: 10px 0 0; }

.plots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plotbox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.plotbox h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
#chart { width: 100%; height: auto; }
.heat-ctl { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.heat-ctl select { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
#heat { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; border-radius: 8px; background: #0a1622; }

@media (max-width: 900px) { .sim { grid-template-columns: 1fr; } .plots { grid-template-columns: 1fr; } }