*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#eef2f6;color:#18212b}header{background:#18324a;color:white;padding:14px 22px}header h1{margin:0 0 4px;font-size:26px}header p{margin:0;color:#dbe8f3}main{display:grid;grid-template-columns:minmax(330px,430px) 1fr;gap:16px;padding:16px}.program-panel,.sim-panel{min-width:0;background:white;border:1px solid #cbd5df;border-radius:10px;padding:14px}.program-panel h2{margin-top:0}.addbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(64px,80px) auto auto;gap:6px;align-items:center}.addbar>*{min-width:0}.addbar select,.addbar input{width:100%}.addbar #unit{white-space:nowrap}.addbar #add{white-space:nowrap}.addbar select,.addbar input,button{font-size:16px;padding:9px;border:1px solid #9aa8b5;border-radius:6px}button{cursor:pointer;background:#f6f8fa}.primary{background:#1769aa;color:#fff;border-color:#1769aa}.program{margin-top:12px;min-height:260px;max-height:460px;overflow:auto;border:1px solid #d6dde4;border-radius:7px;padding:7px;background:#f8fafc}.block{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;margin:5px 0;padding:10px;border-radius:7px;background:#dceaf6;border-left:6px solid #3979aa}.block.active{outline:3px solid #f2b705;background:#fff3bd}.block .actions{display:flex;gap:3px}.block button{padding:4px 7px;font-size:13px}.controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.hint{font-size:13px;color:#596673}.status{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;font-size:14px}canvas{width:100%;height:auto;border:2px solid #384957;background:#f4f0df;display:block}.message{margin-top:9px;padding:10px;border-radius:6px;background:#eef5e9;font-weight:bold}.message.bad{background:#fde8e8}.message.win{background:#dff3df}.empty{color:#788591;text-align:center;padding:40px 10px}@media(max-width:850px){main{grid-template-columns:1fr}.program{min-height:160px;max-height:300px}.addbar{grid-template-columns:minmax(0,1fr) minmax(64px,80px) auto auto}}@media(max-width:480px){.addbar{grid-template-columns:minmax(0,1fr) 80px}.addbar #unit{justify-self:start}.addbar #add{width:100%}}
.levelbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;margin-bottom:9px}.levelbar select{width:100%;min-width:0;font-size:16px;padding:9px;border:1px solid #9aa8b5;border-radius:6px;background:#fff}.level-info{margin-bottom:14px;padding:10px;border:1px solid #cfd9e2;border-radius:7px;background:#f4f8fb;font-size:14px;line-height:1.35}.level-info b{display:block;margin-bottom:3px}.sensor-status{font-weight:bold}.program-panel h2{margin-bottom:8px}.sensor-note{margin-top:5px;font-size:12px;color:#596673}

.tutorial-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}.tutorial-links a{display:inline-block;background:#fff;color:#174f84;text-decoration:none;font-weight:700;padding:8px 14px;border-radius:7px;border:1px solid rgba(255,255,255,.7)}.tutorial-links a:hover,.tutorial-links a:focus{background:#e9f4ff;outline:2px solid #fff;outline-offset:2px}