*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#eef4f8;color:#183044}
header{background:#174f84;color:#fff;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px}
h1{margin:0;font-size:26px}header p{margin:4px 0 0}.toplinks button{white-space:nowrap}
main{padding:14px}.challengebar{background:#fff;border:1px solid #c7d5df;border-radius:12px;padding:10px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#levelTitle{font-weight:bold;color:#174f84;font-size:18px}#levelGoal{flex:1;min-width:220px}
.layout{display:grid;grid-template-columns:210px minmax(420px,1fr) 230px;gap:12px}.panel{background:#fff;border:1px solid #c7d5df;border-radius:12px;padding:12px}
h2{margin:0 0 8px;color:#174f84}h3{margin-bottom:6px}.small{font-size:13px;color:#526979}
.partBtn{width:100%;min-height:48px;margin:5px 0;border:1px solid #a9bac6;background:#f8fbfd;color:#111;border-radius:9px;text-align:left;padding:7px 9px;font-weight:bold;cursor:pointer}
.partBtn:hover{background:#eaf4fb}.partBtn .emoji{font-size:22px;margin-right:7px}
button,select{font-size:15px}button{border:0;border-radius:8px;background:#1976b9;color:#fff;padding:9px 12px;font-weight:bold;cursor:pointer}.secondary{background:#657985}.danger{background:#a94442}
.workspaceTop{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.workspaceTop h2{margin-bottom:2px}.buttons{display:flex;gap:6px;flex-wrap:wrap}
#boardWrap{position:relative;margin-top:10px;height:520px;border:2px solid #9fb4c3;border-radius:10px;overflow:hidden;background-color:#fbfdff;background-image:linear-gradient(#dce7ee 1px,transparent 1px),linear-gradient(90deg,#dce7ee 1px,transparent 1px);background-size:25px 25px}
#board{position:absolute;inset:0}#wireLayer{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.component{position:absolute;width:128px;min-height:78px;background:#fff;border:2px solid #78909c;border-radius:12px;z-index:2;box-shadow:0 2px 5px #0002;user-select:none;touch-action:none}
.component .drag{padding:7px;text-align:center;font-weight:bold;cursor:move}.component .icon{font-size:28px;display:block}.component .delete{position:absolute;right:3px;top:2px;border:0;background:transparent;color:#8b3030;padding:2px 5px;font-size:17px}
.terminal{position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #536773;bottom:-12px;z-index:4;padding:0}
.terminal.a{left:14px;background:#d63d3d}.terminal.b{right:14px;background:#252525}.terminal.selected{outline:4px solid #ffbd2e}
.component.on{border-color:#e0a000;box-shadow:0 0 18px #ffd34d}.component.on .icon{filter:drop-shadow(0 0 7px #ffd34d)}
.component.motor.on .icon{animation:spin .7s linear infinite}.component.buzzer.on{animation:pulse .5s alternate infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{to{box-shadow:0 0 18px #4caf50}}
.meterbar{display:flex;gap:22px;flex-wrap:wrap;padding:9px 4px 0}.legend>div{margin:7px 0}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:5px}.red{background:#d63d3d}.black{background:#252525}
.wire{stroke:#245b80;stroke-width:5;fill:none;stroke-linecap:round}.wire.hot{stroke:#f4b400}.switchOpen{color:#a94442}.switchClosed{color:#2f7d32}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}.hidden{display:none}.modalCard{position:relative;background:#fff;border-radius:14px;max-width:650px;width:100%;max-height:85vh;overflow:auto;padding:24px}.close{position:absolute;right:8px;top:8px;background:#657985;font-size:20px;padding:4px 10px}
.success{font-size:24px;color:#2f7d32;font-weight:bold}.fail{color:#a94442;font-weight:bold}
@media(max-width:950px){.layout{grid-template-columns:180px 1fr}.instructions{grid-column:1/-1}#boardWrap{height:480px}}
@media(max-width:650px){header{align-items:flex-start}.layout{display:block}.panel{margin-bottom:10px}.parts #partsBin{display:grid;grid-template-columns:1fr 1fr;gap:5px}.partBtn{margin:0}#boardWrap{height:480px}.component{width:112px}.challengebar{align-items:flex-start}}
.wirePart{border:2px dashed #245b80;background:#eef7fc;color:#111}
#wireModeNote{font-size:13px;margin:6px 0;padding:7px;border-radius:7px;background:#eef7fc;color:#234}
#wireModeNote.active{background:#fff2c6;border:1px solid #d6a900}