*{box-sizing:border-box}
:root{font-family:Arial,Helvetica,sans-serif;color:#152235;background:#eef3f7}
body{margin:0}
.topbar{height:72px;background:#102a43;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
.topbar strong{font-size:1.25rem;margin-right:14px}
.topbar span{opacity:.9}
.mode{display:flex;align-items:center;gap:10px}
button{font:inherit}
#runToggle{border:0;border-radius:8px;padding:9px 13px;font-weight:700;cursor:pointer}
.lamp,.mini-led{display:inline-block;width:13px;height:13px;border-radius:50%;background:#6d7a86;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.lamp.on,.mini-led.on{background:#3aa655;box-shadow:0 0 10px rgba(58,166,85,.65)}
.workspace{padding:18px;display:grid;grid-template-columns:1.35fr 1.2fr .8fr;gap:18px}
.panel{background:#fff;border:1px solid #d3dce5;border-radius:12px;overflow:hidden;min-height:250px}
.panel-head{padding:18px 20px;border-bottom:1px solid #e3e9ef}
.panel-head h2{margin:0 0 6px}
.panel-head p{margin:0;color:#607080}
.device-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px}
.device{border:1px solid #cdd7e1;border-radius:10px;padding:16px;background:#fafcfe}
.device h3{margin-top:0}
.term-row,.status-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.terminal{padding:8px 10px;border-radius:7px;font-weight:700}
.plus{background:#ffe8e8}.common{background:#e7edf4}
.field-btn{width:100%;padding:12px;border:0;border-radius:8px;background:#2474c6;color:white;font-weight:700;cursor:pointer;margin-bottom:12px}
.field-btn.danger{background:#b43c3c}.field-btn.secondary{background:#65788a}
.coil{display:flex;align-items:center;justify-content:space-between;border:2px solid #65788a;padding:15px;border-radius:8px;margin-bottom:12px}
.motor-device{text-align:center}
.motor{width:86px;height:86px;border-radius:50%;border:8px solid #637789;margin:15px auto;display:grid;place-items:center;font-size:2rem;font-weight:800;transition:.2s}
.motor.running{animation:spin .7s linear infinite;border-style:dashed}
@keyframes spin{to{transform:rotate(360deg)}}
.rung{padding:36px 22px;display:flex;align-items:stretch;min-height:300px}
.rail{width:4px;background:#20384d}
.logic-line{display:flex;align-items:center;gap:16px;flex:1;padding:0 16px;border-top:3px solid #708090;border-bottom:3px solid transparent}
.contact,.coil-symbol{min-width:110px;text-align:center;padding:10px;border-radius:7px}
.contact span,.coil-symbol span{display:block;font-size:.8rem;margin-bottom:6px}
.contact b,.coil-symbol b{font-size:1.35rem}
.branch{display:flex;flex-direction:column;gap:18px;border-left:2px solid #708090;border-right:2px solid #708090;padding:8px 14px}
.branch-row{min-height:65px;display:flex;align-items:center}
.energized{background:#e6f7ea;box-shadow:inset 0 0 0 2px #3aa655}
.scan-box{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e3e9ef}
.scan-box div{padding:16px 20px}
.scan-box span{display:block;color:#607080;font-size:.8rem}
.scan-box strong{font-size:1.3rem}
.io-panel table{width:100%;border-collapse:collapse}
.io-panel th,.io-panel td{text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8ef;font-size:.9rem}
.explain{padding:16px}
.explain h3{margin-top:0}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}.device-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.device-grid{grid-template-columns:1fr}.topbar{height:auto;padding:14px;align-items:flex-start;flex-direction:column}.workspace{padding:10px}.logic-line{overflow-x:auto}}


/* Proper ladder diagram layout */
.ladder-panel{
  overflow:hidden;
}
.ladder-canvas{
  position:relative;
  height:360px;
  margin:0;
  background:#fff;
  min-width:720px;
}
.ladder-rail{
  position:absolute;
  top:34px;
  bottom:34px;
  width:4px;
  background:#111;
}
.left-rail{left:58px}
.right-rail{right:58px}
.ladder-label{
  position:absolute;
  top:8px;
  font-size:.85rem;
  font-weight:700;
}
.left-label{left:48px}
.right-label{right:46px}
.rung-number{
  position:absolute;
  left:6px;
  top:160px;
  font-size:.78rem;
  color:#4f5f6d;
}
.rung-wire{
  position:absolute;
  height:3px;
  background:#111;
}
.main-wire{
  left:58px;
  right:58px;
  top:180px;
}
.ladder-contact{
  position:absolute;
  width:92px;
  height:72px;
  top:144px;
  background:#fff;
  text-align:center;
  z-index:2;
}
.ladder-contact .tag,
.ladder-coil .tag{
  display:block;
  font-size:.78rem;
  margin-bottom:10px;
  white-space:nowrap;
}
.contact-symbol{
  position:relative;
  display:block;
  width:72px;
  height:28px;
  margin:0 auto;
}
.contact-symbol:before,
.contact-symbol:after{
  content:"";
  position:absolute;
  top:13px;
  width:22px;
  height:3px;
  background:#111;
}
.contact-symbol:before{left:0}
.contact-symbol:after{right:0}
.contact-symbol .bar{
  position:absolute;
  top:0;
  width:3px;
  height:28px;
  background:#111;
}
.contact-symbol .bar:first-child{left:29px}
.contact-symbol .bar:last-child{right:29px}

.stop-xic{left:105px}
.ol-xic{left:225px}
.start-xic{left:360px;top:120px}
.seal-xic{left:360px;top:220px}

.branch-left,
.branch-right{
  position:absolute;
  width:3px;
  background:#111;
  top:180px;
  height:100px;
  z-index:1;
}
.branch-left{left:340px}
.branch-right{left:470px}
.branch-top-wire,
.branch-bottom-wire{
  position:absolute;
  height:3px;
  background:#111;
  left:340px;
  width:130px;
  z-index:1;
}
.branch-top-wire{top:180px}
.branch-bottom-wire{top:280px}
.branch-bottom-wire:before{
  content:"";
  position:absolute;
  left:0;
  top:-100px;
  width:3px;
  height:100px;
  background:#111;
}

.ladder-coil{
  position:absolute;
  right:96px;
  top:143px;
  width:105px;
  height:72px;
  text-align:center;
  background:#fff;
  z-index:2;
}
.coil-shape{
  display:block;
  font-size:2.1rem;
  line-height:28px;
  font-family:Georgia,serif;
}
.ladder-contact.energized .contact-symbol:before,
.ladder-contact.energized .contact-symbol:after,
.ladder-contact.energized .contact-symbol .bar,
.ladder-coil.energized .coil-shape{
  filter:drop-shadow(0 0 3px rgba(35,160,80,.55));
}
.ladder-contact.energized,
.ladder-coil.energized{
  background:#edf9f0;
  box-shadow:inset 0 0 0 2px #3aa655;
  border-radius:6px;
}
@media(max-width:760px){
  .ladder-panel{overflow-x:auto}
  .ladder-canvas{min-width:720px}
}


/* Wiring simulator */
.wiring-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.wiring-actions{display:flex;gap:8px;flex-wrap:wrap}
.small-btn{border:0;border-radius:7px;background:#173b5e;color:#fff;padding:9px 12px;font-weight:700;cursor:pointer}
.small-btn.secondary{background:#647586}
.wiring-board{
  position:relative;
  min-height:650px;
  margin:16px;
  border:2px solid #aab7c4;
  border-radius:12px;
  background:
    linear-gradient(#eef3f6 1px, transparent 1px),
    linear-gradient(90deg,#eef3f6 1px, transparent 1px),
    #f9fbfd;
  background-size:24px 24px;
  overflow:hidden;
}
.wire-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5;
}
.wire-line{
  stroke:#222;
  stroke-width:4;
  fill:none;
  pointer-events:stroke;
  cursor:pointer;
}
.wire-line.live{stroke-width:5}
.wire-device{
  position:absolute;
  z-index:10;
  background:#fff;
  border:1px solid #9eacb9;
  border-radius:10px;
  padding:12px;
  width:190px;
  box-shadow:0 3px 10px rgba(0,0,0,.07);
}
.wire-device h3{font-size:.95rem;margin:0 0 10px}
.supply{left:22px;top:22px}
.start-device{left:235px;top:22px}
.stop-device{left:448px;top:22px}
.ol-device{left:661px;top:22px}
.input-card{left:235px;top:285px}
.output-card{left:475px;top:315px}
.contactor-device{left:715px;top:315px}
.motor-device{left:715px;top:500px}
.terminal-row{display:flex;justify-content:space-around;gap:18px;margin:8px 0 12px}
.wire-terminal{
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid #516476;
  background:#fff;
  cursor:pointer;
  font-weight:800;
  position:relative;
  z-index:12;
}
.wire-terminal:hover{transform:scale(1.05)}
.wire-terminal.selected{outline:4px solid rgba(36,116,198,.25);border-color:#2474c6}
.wire-terminal.connected{box-shadow:0 0 0 3px rgba(58,166,85,.2)}
.wire-terminal.positive{border-color:#a73333}
.wire-terminal.common{border-color:#283849}
.module-row{display:grid;grid-template-columns:1fr 46px 20px;align-items:center;gap:6px;margin:7px 0}
.symbol-text{text-align:center;font-family:monospace;font-size:1.05rem;margin-bottom:8px}
.wiring-footer{display:flex;justify-content:space-between;gap:15px;padding:0 18px 18px;color:#526579;font-size:.9rem}
.wiring-hint{
  position:absolute;
  left:22px;
  top:280px;
  width:190px;
  z-index:20;
  background:#fff8d9;
  border:1px solid #d7bd57;
  border-radius:9px;
  padding:12px;
  font-size:.78rem;
  line-height:1.55;
}
.wiring-hint strong{display:block;margin-bottom:5px}
@media(max-width:1100px){
  .wiring-panel{overflow-x:auto}
  .wiring-board{min-width:930px}
}


/* v3.1 responsive wiring-board fix */
.wiring-board{
  min-height:700px;
  overflow:hidden;
}
.wire-device{
  width:22%;
  min-width:0;
  padding:10px;
}
.wire-device h3{
  font-size:.88rem;
}
.supply{left:2%;top:22px}
.start-device{left:26%;top:22px}
.stop-device{left:50%;top:22px}
.ol-device{left:74%;top:22px}

.input-card{left:26%;top:300px}
.output-card{left:51%;top:330px}
.contactor-device{left:76%;top:330px}
.motor-device{left:76%;top:520px}

.wiring-hint{
  left:2%;
  top:300px;
  width:21%;
}

@media(max-width:1100px){
  .wiring-panel{overflow:visible}
  .wiring-board{min-width:0}
}

@media(max-width:760px){
  .wiring-board{
    min-width:760px;
    overflow:hidden;
  }
  .wiring-panel{
    overflow-x:auto;
  }
  .wire-device{
    width:165px;
  }
  .supply{left:18px}
  .start-device{left:200px}
  .stop-device{left:382px}
  .ol-device{left:564px}
  .input-card{left:200px}
  .output-card{left:390px}
  .contactor-device{left:580px}
  .motor-device{left:580px}
  .wiring-hint{left:18px;width:165px}
}


/* v4 wire visibility */
.wire-layer{
  z-index:30;
}
.wire-device{
  z-index:10;
}
.wire-terminal{
  z-index:40;
}
.wire-line{
  stroke-width:5;
  fill:none;
  pointer-events:stroke;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* Ladder editor */
.editor-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.editor-actions{display:flex;gap:8px;flex-wrap:wrap}
.instruction-palette{
  padding:12px 16px;
  border-bottom:1px solid #dfe6ec;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  background:#f7fafc;
}
.instruction-btn{
  border:1px solid #8999a8;
  background:#fff;
  border-radius:7px;
  padding:7px 10px;
  font-weight:700;
  cursor:pointer;
}
.palette-note{font-size:.78rem;color:#607080}
.tag-table-wrap{padding:12px 16px 0}
.tag-table{width:100%;border-collapse:collapse;font-size:.8rem}
.tag-table th,.tag-table td{padding:7px 8px;border-bottom:1px solid #e3e9ef;text-align:left}

.ladder-editor{
  padding:16px;
  overflow-x:auto;
  background:#fff;
}
.editable-rung{
  display:grid;
  grid-template-columns:65px 4px minmax(560px,1fr) 4px 88px;
  align-items:stretch;
  min-width:820px;
  min-height:155px;
  position:relative;
  border:2px solid transparent;
  border-radius:9px;
  margin-bottom:12px;
  padding:10px 6px;
}
.editable-rung.selected-rung{
  border-color:#8eb5d8;
  background:#f9fcff;
}
.editor-rung-number{
  align-self:center;
  font-size:.76rem;
  color:#566879;
}
.editor-rail{background:#111;width:4px}
.editor-rung-line{
  align-self:center;
  min-height:95px;
  border-top:3px solid #111;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 16px;
}
.editor-inst{
  position:relative;
  min-width:112px;
  background:#fff;
  text-align:center;
  padding:8px 7px;
  border-radius:6px;
  z-index:2;
}
.editor-inst.energized{
  background:#e9f8ee;
  box-shadow:inset 0 0 0 2px #3aa655;
}
.inst-tag{margin-bottom:7px}
.tag-select{
  width:100%;
  font-size:.76rem;
  border:1px solid #b6c2cd;
  border-radius:5px;
  padding:4px;
}
.inst-symbol{
  font-family:monospace;
  font-size:1.65rem;
  line-height:1;
  margin-bottom:5px;
  white-space:nowrap;
}
.inst-symbol.coil{font-family:Georgia,serif;font-size:2rem}
.delete-inst{
  position:absolute;
  top:-9px;
  right:-9px;
  width:23px;
  height:23px;
  border-radius:50%;
  border:0;
  background:#b94040;
  color:#fff;
  font-size:1rem;
  line-height:20px;
  cursor:pointer;
}
.delete-rung{
  align-self:center;
  margin-left:8px;
  border:0;
  border-radius:6px;
  background:#e9eef2;
  color:#425466;
  padding:8px;
  cursor:pointer;
  font-size:.74rem;
}
.editor-branch{
  position:relative;
  min-width:155px;
  display:flex;
  flex-direction:column;
  gap:18px;
  border-left:3px solid #111;
  border-right:3px solid #111;
  padding:8px 12px;
}
.branch-path{
  min-height:70px;
  border-top:3px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
}
.branch-delete{top:-13px;right:-13px}
.output-inst{margin-left:auto}
@media(max-width:760px){
  .editor-head{flex-direction:column}
}

.topbar strong{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
}
.topbar-byline{
  font-size:.58em;
  font-weight:500;
  opacity:.82;
}

.level-nav{
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  padding:8px 10px;
  border-radius:7px;
  font-size:.8rem;
}

.completion-check{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
}
.completion-check span{color:#536577}
@media(max-width:760px){
  .completion-check{flex-direction:column;align-items:flex-start}
}

.small-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.plc-mode-box{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #aebbc7;
  border-radius:8px;
  background:#eef3f7;
  margin-right:4px;
}
.plc-mode-label{
  font-size:.68rem;
  letter-spacing:.08em;
  font-weight:800;
  color:#5b6e7f;
}
.plc-run-btn{
  margin-left:3px;
}
.hint-run-note{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(0,0,0,.14);
}
@media(max-width:850px){
  .editor-actions{
    flex-wrap:wrap;
  }
  .plc-mode-box{
    width:100%;
    justify-content:flex-start;
  }
}

.program-mode-notice{
  width:100%;
  margin-top:8px;
  padding:9px 11px;
  border:1px solid #c98432;
  border-radius:7px;
  background:#fff3df;
  color:#7a4a12;
  font-size:.8rem;
  font-weight:700;
}
.ladder-editor.run-locked{
  opacity:.92;
}
.ladder-editor.run-locked .delete-inst,
.ladder-editor.run-locked .delete-rung,
.ladder-editor.run-locked .tag-select{
  cursor:not-allowed;
}

.run-edit-blocked{
  opacity:.58;
  cursor:not-allowed !important;
}
.program-mode-notice{
  animation:programNoticeIn .18s ease-out;
}
@keyframes programNoticeIn{
  from{opacity:.2;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}