/* Board Simulator styles - green/white accent, responsive */
:root{
  --sim-bg:#f7fff9;
  --sim-accent:#00d988;
  --sim-accent-dark:#00c86b;
  --sim-border: #e6f6ee;
  --sim-text:#0b2b1a;
  --sim-muted:#6b7a73;
  --transition: 0.18s ease;
}
.simulator-section{
  background: linear-gradient(180deg, rgba(0,217,136,0.03), transparent 40%);
  padding: 3rem 0;
}
.simulator-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
  display:grid;
  grid-template-columns: 380px 1fr 360px;
  gap:1rem;
  align-items:start;
}
.simulator-left, .simulator-right{
  background: white;
  border-radius:12px;
  padding:1rem;
  border:1px solid var(--sim-border);
  box-shadow: 0 8px 30px rgba(6,30,18,0.04);
}
.simulator-canvas-wrap{
  background: white;
  border-radius:12px;
  padding:1rem;
  border:1px solid var(--sim-border);
  min-height:420px;
}
.simulator-controls{display:flex;gap:0.5rem;align-items:center;margin-bottom:0.75rem}
.simulator-select{padding:0.6rem 0.8rem;border:1px solid var(--sim-border);border-radius:8px}
.sim-run{background:var(--sim-accent);color:white;border:none;padding:0.6rem 0.9rem;border-radius:8px;font-weight:700;cursor:pointer}
.sim-run:disabled{opacity:0.6;cursor:not-allowed}
.component-palette{display:flex;flex-direction:column;gap:0.5rem}
.component-item{padding:0.6rem;border-radius:8px;border:1px dashed var(--sim-border);background:transparent;cursor:grab}
.board-canvas{width:100%;height:360px;background:linear-gradient(180deg,#fcfff0,#f7fff9);border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative}
.virtual-led{width:22px;height:22px;border-radius:50%;background:#2b2b2b;border:2px solid rgba(0,0,0,0.15);position:absolute}
.virtual-button{width:34px;height:28px;border-radius:6px;background:#eee;border:2px solid #ddd;position:absolute;display:flex;align-items:center;justify-content:center}
.serial-monitor{height:180px;overflow:auto;background:#0b2b1a;color:#dff6e7;padding:0.75rem;border-radius:8px;font-family:monospace;font-size:0.9rem;border:1px solid var(--sim-border)}
.editor-wrap{height:420px;border-radius:8px;border:1px solid var(--sim-border);overflow:hidden}
.sim-footer{margin-top:0.6rem;color:var(--sim-muted);font-size:0.9rem}

@media (max-width: 1000px){
  .simulator-container{grid-template-columns:1fr;}
  .simulator-left,.simulator-right{order:0}
  .editor-wrap{order:2;margin-top:0.75rem}
}