:root { color-scheme: dark; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:#0b0d12; color:#e7e7e7;
  overflow:hidden;
}

.wrap{
  display:grid;
  grid-template-columns: 440px 1fr;
  gap:10px;
  height:100vh;
  padding:10px;
  box-sizing:border-box;
}

.panel{
  background:#111624;
  border:1px solid #1f2a45;
  border-radius:12px;
  padding:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.panelScroll{
  overflow:auto;
  min-height:0;
  padding-right:6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.section{
  border:1px solid #1f2a45;
  border-radius:10px;
  padding:10px;
  background: rgba(255,255,255,0.02);
}
.section h2{
  margin:0 0 8px 0;
  font-size:14px;
  letter-spacing:0.2px;
  color:#dbe3f7;
}

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }

.field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
label{ font-size:12px; color:#cfd6e6; line-height:1.1; }

input[type="number"], input[type="text"], select{
  width:100%;
  box-sizing:border-box;
  background:#0c1220;
  color:#e7e7e7;
  border:1px solid #263354;
  border-radius:10px;
  padding:7px 9px;
  outline:none;
  font-size:12px;
}

input[readonly]{
  color:#b8c3dd;
}

.btnRow{ display:flex; gap:8px; margin-top:6px; }
button{
  background:#1a2a52; color:#e7e7e7;
  border:1px solid #2a3c6e;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-size:12px;
  flex:1;
}
button:hover{ background:#22366b; }
button:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.eq{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color:#b8c3dd;
  line-height:1.35;
  margin-top:6px;
}

.mainPanel{
  padding:0;
}

.tabBar{
  display:flex;
  gap:8px;
  padding:10px;
  border-bottom:1px solid #1f2a45;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
}

.tab{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #2a3c6e;
  background:#0c1220;
  font-size:12px;
}

.tab.active{
  background:#1a2a52;
  border-color:#3a57a6;
  color:#eaf1ff;
}

.tabContent{
  display:none;
  min-height:0;
  flex:1;
}

.tabContent.active{
  display:flex;
  flex:1;
  min-height:0;
}

.canvasWrap{
  background:#0b0d12;
  border-top:0;
  border-radius:0 0 12px 12px;
  overflow:hidden;
  min-width:0;
  position:relative;
  flex:1;
}

#simCanvas{ width:100%; height:100%; display:block; }

.hud{
  position:absolute;
  top:10px; left:10px; right:10px;
  pointer-events:none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  color: rgba(255,255,255,0.88);
  line-height:1.35;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  gap:2px;
}

.plotsWrap{
  padding:10px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  flex:1;
}

.plotCard{
  border:1px solid #1f2a45;
  border-radius:12px;
  padding:10px;
  background: rgba(255,255,255,0.02);
}
.plotCard h3{
  margin:0 0 8px 0;
  font-size:13px;
  letter-spacing:0.2px;
  color:#dbe3f7;
}

.plotCanvas{
  width:100%;
  height:220px;
  display:block;
  border:1px solid #1f2a45;
  border-radius:10px;
  background:#0b0d12;
}

@media (max-width: 900px){
  body{ overflow:auto; }
  .wrap{
    grid-template-columns: 1fr;
    height:auto;
  }
  .mainPanel{
    min-height: 60vh;
  }
}


.plotTooltip{
  position: fixed;
  z-index: 1000;
  display:none;
  pointer-events:none;
  background: rgba(12,18,32,0.98);
  border:1px solid #2a3c6e;
  border-radius:10px;
  padding:8px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.9);
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
}

.plotTooltip .muted{ color:#b8c3dd; }

.curveTableWrap{
  border:1px solid #1f2a45;
  border-radius:10px;
  overflow:hidden;
  margin-top:8px;
}

.curveTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#0b0f1c;
}

.curveTable th,
.curveTable td{
  border-bottom:1px solid #1f2a45;
  padding:6px;
}

.curveTable th{
  text-align:left;
  font-size:11px;
  color:#b8c3dd;
  background:#0d1322;
}

.curveTable tbody tr:last-child td{
  border-bottom:0;
}

.curveTable input[type="number"]{
  border-radius:8px;
  padding:6px 7px;
}

.curveTable .curveRemoveBtn{
  width:100%;
  border-radius:8px;
  padding:6px;
  font-size:11px;
  background:#2b1b2a;
  border-color:#5a2f57;
}

.curveTable .curveRemoveBtn:hover{
  background:#3a2340;
}

.curveBtnRow{
  margin-top:8px;
}

.miniPlotCanvas{
  width:100%;
  height:130px;
  display:block;
  border:1px solid #1f2a45;
  border-radius:10px;
  background:#0b0d12;
  margin-top:8px;
}