*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:#1e1e1e;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh}#app-container{width:100%;max-width:1200px;padding:2rem}.step-section{display:flex;flex-direction:column;align-items:center;text-align:center;animation:fadeIn .3s ease-in-out}.hidden{display:none!important}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.placeholder-box{width:100%;height:400px;background-color:#2a2a2a;border:2px dashed #555;border-radius:8px;display:flex;justify-content:center;align-items:center;margin:2rem 0;color:#888}.button-group{margin-top:2rem;display:flex;gap:1rem}.export-group{flex-direction:column;margin-bottom:2rem}button{padding:12px 24px;font-size:1rem;font-weight:700;border:none;border-radius:6px;cursor:pointer;background-color:#007bff;color:#fff;transition:background-color .2s}button:hover{background-color:#0056b3}button.secondary{background-color:#444}button.secondary:hover{background-color:#555}.monitor-add-form{display:flex;gap:10px;align-items:center;margin-bottom:20px;background:#2a2a2a;padding:15px;border-radius:8px}.monitor-add-form input{padding:8px;width:100px;border:1px solid #555;border-radius:4px;background:#1e1e1e;color:#fff;text-align:center}.monitor-add-form select{padding:8px;border:1px solid #555;border-radius:4px;background:#1e1e1e;color:#fff}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.status-box{color:#fc0;font-size:.9rem;margin-bottom:15px}.preset-group{display:flex;gap:8px;margin-bottom:15px;justify-content:center;flex-wrap:wrap}.preset-btn{background-color:#333;border:1px solid #555;color:#ddd;padding:6px 12px;font-size:.85rem;border-radius:20px;cursor:pointer;transition:all .2s}.preset-btn:hover{background-color:#007bff;border-color:#007bff;color:#fff}.layout-workspace.freeform-canvas{display:block;position:relative;width:100%;max-width:900px;height:500px;background-color:#1a1a1a;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px;border-radius:12px;border:2px dashed #444;margin-bottom:20px;overflow:hidden;touch-action:none}.canvas-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#555;pointer-events:none}.monitor-item{position:absolute;background-color:rgba(0,123,255,.8);border:2px solid #0af;color:#fff;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:grab;user-select:none;box-shadow:0 4px 10px rgba(0,0,0,.5);transition:transform .1s,box-shadow .1s}.monitor-item:active{cursor:grabbing;z-index:100;transform:scale(1.02);box-shadow:0 10px 20px rgba(0,0,0,.7)}.monitor-item .mon-id{font-size:1.2rem;font-weight:700}.monitor-item .mon-res{font-size:.7rem;color:#cce5ff}.monitor-item.anchor-mon{border:2px solid #fc0;z-index:10}.anchor-badge{position:absolute;top:-10px;right:-10px;background:#fc0;color:#000;font-size:.7rem;font-weight:700;padding:3px 6px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.5)}.btn-delete-mon{position:absolute;top:6px;left:6px;width:22px;height:22px;background:rgba(255,50,50,.9);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center;border-radius:50%;cursor:pointer;z-index:20;transition:transform .1s,background .1s}.btn-delete-mon:hover{background:red;transform:scale(1.15)}#step-calibrate.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;margin:0;padding:0;max-width:none;background-color:#000;z-index:100;display:flex}#calib-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.calib-sidebar{position:absolute;top:20px;left:20px;width:280px;background:rgba(30,30,30,.85);backdrop-filter:blur(10px);border:1px solid #444;border-radius:12px;padding:20px;z-index:10;box-shadow:0 10px 30px rgba(0,0,0,.5)}.calib-sidebar h3{margin-bottom:15px;font-size:1.1rem;color:#fff}.sidebar-actions{display:flex;flex-direction:column;gap:10px;margin-top:15px}.minimap-grid{position:relative;width:100%;height:120px;background:rgba(0,0,0,.5);border-radius:8px;margin-bottom:15px;overflow:hidden}.mini-mon{position:absolute;background:#555;border-radius:3px;border:1px solid #777;display:flex;justify-content:center;align-items:center;font-size:10px;color:#aaa;cursor:pointer;transition:background .2s,border-color .2s}.mini-mon:hover{background:#777;border-color:#0fc}.mini-mon.calibrating{box-shadow:0 0 10px #0fc;background:#0fc;color:#000;font-weight:700}.mini-mon.active{background:#007bff;color:#fff;border-color:#4da3ff}.task-list{list-style:none;margin-bottom:20px}.task-list li{padding:8px;font-size:.9rem;border-bottom:1px solid #444;color:#888;cursor:pointer;transition:background .2s}.task-list li:hover{background:rgba(255,255,255,.1)}.task-list li.current{color:#0fc;font-weight:700;background:rgba(0,255,204,.1)}.task-list li.done{color:#0f0;text-decoration:line-through}.calib-panel{position:absolute;top:50%;transform:translateY(-50%);background:#141414;border:1px solid #444;border-radius:12px;padding:20px;z-index:10;transition:background .3s,opacity .3s;opacity:1}.panel-left{left:320px}.panel-right{right:20px}.panel-header{text-align:center;margin-bottom:15px;font-weight:700;color:#0fc}.stepper-group{display:flex;align-items:center;gap:8px;margin-bottom:15px}.step-btn{background:#333;border:1px solid #555;color:#fff;padding:10px 15px;border-radius:6px;cursor:pointer}.step-btn:hover{background:#555}.val-display{width:60px;text-align:center;font-size:1.2rem;font-weight:700}.panel-actions{display:flex;flex-direction:column;gap:8px}.unit-label{color:#888;margin-left:2px;font-weight:700}.val-input{width:70px;text-align:center;font-size:1.2rem;font-weight:700;background:rgba(0,0,0,.4);color:#fff;border:1px solid #555;border-radius:4px;padding:6px;outline:0;transition:all .2s ease;cursor:ns-resize}.val-input:hover{border-color:#0af;box-shadow:0 0 8px rgba(0,170,255,.4)}.val-input:focus{border-color:#0fc}.tutorial-anim-container{width:100%;height:160px;background:rgba(0,0,0,.4);border-radius:6px;border:1px solid #444;margin-bottom:15px;position:relative;display:flex;justify-content:center;align-items:center}.anim-phase{display:none;gap:30px;justify-content:center;align-items:center}.anim-phase.active{display:flex}.anim-mon{width:150px;height:100px;background:#333;border:2px solid #555;border-radius:8px;position:relative;overflow:hidden}.anim-center-line{position:absolute;width:4px;height:100%;background:#0f0;top:0;transform:translateX(-50%)}.anim-cursor{position:absolute;width:12px;height:12px;background:#fff;clip-path:polygon(0 0,0 100%,100% 50%);top:50%;margin-top:-6px;transform:translateX(-50%);z-index:10}.mon-left .anim-center-line{animation:moveLineLeft 3s infinite ease-in-out}.mon-left .anim-cursor{animation:moveCursorLeft 3s infinite ease-in-out}.mon-right .anim-center-line{animation:moveLineRight 3s infinite ease-in-out}.mon-right .anim-cursor{animation:moveCursorRight 3s infinite ease-in-out}@keyframes moveLineLeft{0%,20%{left:50%}100%,80%{left:100%}}@keyframes moveCursorLeft{0%,20%{left:50%;opacity:1}100%,80%{left:100%;opacity:0}}@keyframes moveLineRight{0%,20%{left:-50%}100%,80%{left:0}}@keyframes moveCursorRight{0%,20%{left:-50%;opacity:1}100%,80%{left:0;opacity:0}}.anim-offset .mon-left{transform:translateY(-20px)}.anim-offset .mon-right{transform:translateY(20px)}.horiz-line{position:absolute;left:0;width:100%;height:4px}.anim-offset .mon-left .horiz-line{top:50%;transform:translateY(-50%);animation:colorChangeInstant 3s infinite ease-in-out}.anim-offset .mon-right .horiz-line{transform:translateY(-50%);animation:alignHorizontal 3s infinite ease-in-out}@keyframes colorChangeInstant{0%,79.9%{background:#0fc}100%,80%{background:#0f0}}@keyframes alignHorizontal{0%,20%{top:50%;background:#0fc}79.9%{top:calc(50% - 40px);background:#0fc}100%,80%{top:calc(50% - 40px);background:#0f0}}.anim-gap .anim-mon{overflow:hidden}.circle-part{position:absolute;width:80px;height:80px;border:4px solid #0fc;border-radius:50%;top:50%;transform:translateY(-50%);box-sizing:border-box;z-index:10}.anim-gap .mon-left .circle-part{right:-55px;animation:colorChangeGlow 3s infinite ease-in-out}.anim-gap .mon-right .moving-part{animation:moveGapCircle 3s infinite ease-in-out}@keyframes moveGapCircle{0%,20%{left:10px;border-color:#0fc;box-shadow:none}79.9%{left:-55px;border-color:#0fc;box-shadow:none}100%,80%{left:-55px;border-color:#0f0;box-shadow:0 0 15px 5px rgba(0,255,0,.6),inset 0 0 10px rgba(0,255,0,.4)}}@keyframes colorChangeGlow{0%,79.9%{border-color:#0fc;box-shadow:none}100%,80%{border-color:#0f0;box-shadow:0 0 15px 5px rgba(0,255,0,.6),inset 0 0 10px rgba(0,255,0,.4)}}.overlay-controls{display:flex;gap:20px;align-items:center;margin-bottom:20px;width:100%;max-width:900px}.upload-btn{background:#333;color:#fff;padding:10px;border-radius:6px}.info-box{background:#222;padding:10px 15px;border-radius:6px;border:1px solid #444;flex-grow:1;text-align:left}.preview-wrapper{width:100%;max-width:900px;height:500px;background-color:#1a1a1a;background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 25%,transparent 75%,#2a2a2a 75%,#2a2a2a),linear-gradient(45deg,#2a2a2a 25%,transparent 25%,transparent 75%,#2a2a2a 75%,#2a2a2a);background-size:20px 20px;background-position:0 0,10px 10px;border:2px solid #333;border-radius:8px;display:flex;justify-content:center;align-items:center;overflow:hidden}#preview-canvas{width:100%;height:100%;display:block;background-color:transparent!important;box-shadow:0 0 20px rgba(0,0,0,.5)}.editor-toolbar{display:flex;gap:8px;margin-bottom:15px;width:100%;max-width:900px;background:#222;padding:10px;border-radius:8px;border:1px solid #444;justify-content:center;align-items:center}.tool-btn{background:#333;color:#ddd;border:1px solid #555;padding:6px 12px;font-size:.85rem;border-radius:4px;cursor:pointer}.tool-btn:hover{background:#007bff;border-color:#007bff;color:#fff}.editor-toolbar .divider{width:1px;height:20px;background:#555;margin:0 5px}