*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f5f7fa;color:#333;font-size:16px;line-height:1.6;height:100vh;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px 15px;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:1000;height:60px;flex-wrap:wrap;min-height:60px;overflow:visible}.toolbar-section{display:flex;align-items:center;gap:10px}.logo{display:flex;align-items:center;gap:6px;font-size:19px;font-weight:700;height:40px;white-space:nowrap}.logo-image{height:28px;width:auto;border-radius:4px}.logo i{font-size:24px;color:gold}.connection-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.connection-mode-selector{flex-shrink:0}.connection-mode-selector select{padding:5px 8px;border:1px solid #ddd;border-radius:4px;background:#fff;font-size:14px;min-width:120px;max-width:140px}.connection-input{display:flex;align-items:center;gap:5px;flex-shrink:0;position:relative}.connection-input input{padding:5px 8px;border:1px solid #ddd;border-radius:4px;font-size:14px;width:180px;background:#fff}.connection-input input[type=number]{width:60px}.serial-info{font-size:12px;color:#e9ecef;font-style:italic;padding:5px 8px;background-color:rgba(255,255,255,.1);border-radius:4px;white-space:nowrap}.status-indicator{display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:12px;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0}.status-indicator.connected{background-color:rgba(40,167,69,.2);color:#28a745}.status-indicator.disconnected{background-color:rgba(220,53,69,.2);color:#dc3545}.status-indicator i{font-size:8px}.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;white-space:nowrap;flex-shrink:0}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#0056b3}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover:not(:disabled){background-color:#1e7e34}.btn-warning{background-color:#ffc107;color:#212529}.btn-warning:hover:not(:disabled){background-color:#e0a800}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover:not(:disabled){background-color:#c82333}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#545b62}.btn-outline{background-color:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-outline:hover:not(:disabled){background-color:rgba(255,255,255,.2)}#language-toggle-btn{background-color:rgba(21,179,255,.8);color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:700;transition:background-color .2s;min-width:40px;text-align:center}#language-toggle-btn:hover{background-color:rgba(14,163,232,.9)}#language-toggle-btn.active{background-color:#0ea3e8}.btn-small{padding:4px 8px;font-size:11px;gap:3px}.program-controls,.file-controls{display:flex;gap:6px;align-items:center}.main-container{display:grid;grid-template-columns:1fr 500px;height:calc(100vh - 60px);gap:0}.left-panel{display:flex;flex-direction:column;background-color:#fff;border-right:1px solid #e0e4ed;overflow:hidden}.left-panel.expanded{grid-column:1}.toolbox-section{display:flex;flex-direction:column;height:100%}.blockly-container{flex:1;position:relative;overflow:hidden}#blocklyDiv{width:100%;height:100%;background-color:#f8f9fa}.right-panel{display:flex;flex-direction:column;background-color:#f4f6fb;border-left:1px solid #e0e4ed;overflow-y:auto;width:500px}.panel-section{border-bottom:1px solid #e0e4ed;border-radius:0}.panel-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#4f5bd5,#6c46c1);color:#fff;padding:10px 14px;cursor:pointer;transition:background .2s ease;font-size:13px;font-weight:600;letter-spacing:.3px;user-select:none}.panel-header:hover{background:linear-gradient(135deg,#3d49c4,#5a38ae)}.panel-header i{font-size:14px;margin-right:7px;opacity:.9}.panel-header span{flex:1}.collapse-btn{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;font-size:13px;padding:3px 5px;border-radius:4px;transition:all .2s ease;line-height:1}.collapse-btn:hover{color:#fff;background:rgba(255,255,255,.15)}.collapse-btn.collapsed{transform:rotate(-90deg)}.panel-content{background:#fff;padding:14px;border-bottom:1px solid #eef0f5}.panel-content.collapsed{display:none}.status-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin-bottom:8px}.status-item{display:flex;flex-direction:column;gap:2px}.status-item label{font-weight:600;color:#6c757d;font-size:10px;text-transform:uppercase;letter-spacing:.3px}.status-item span{padding:3px 5px;background:#f4f6fb;border:1px solid #e0e4ed;border-radius:4px;font-size:11px;font-weight:600;text-align:center;color:#444}.status-item span.status-online{background:#e6f6ee;border-color:#81c784;color:#1b5e20}.status-item span.status-offline{background:#fdecea;border-color:#ef9a9a;color:#7f1717}.status-item span.status-connecting{background:#fff8e1;border-color:#ffe082;color:#7c5300}#device-id,#firmware-version{font-family:Consolas,Monaco,monospace;font-size:10px;letter-spacing:.3px}#running-status{font-weight:700}.status-servo{background:#e6f6ee!important;border-color:#81c784!important;color:#1b5e20!important}.status-protect{background:#fdecea!important;border-color:#ef9a9a!important;color:#7f1717!important}.input-hint{position:absolute;top:100%;left:0;right:0;padding:6px 8px;margin-top:2px;border-radius:4px;font-size:12px;font-weight:500;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.15);animation:fadeInUp .2s ease}.input-hint-success{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.input-hint-error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.input-hint-info{background-color:#d1ecf1;border:1px solid #bee5eb;color:#0c5460}@keyframes fadeInUp{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.status-servo{background:#d4edda!important;border-color:#c3e6cb!important;color:#155724!important}.status-protect{background:#f8d7da!important;border-color:#f5c6cb!important;color:#721c24!important}.quick-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}.quick-btn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background-color:#f8f9fa;border:1.5px solid #e0e4ed;border-radius:8px;cursor:pointer;transition:all .18s ease;text-decoration:none;font-size:12px}.quick-btn:hover{transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,0,0,.12)}#home-position{border-color:#4f9cf5}#home-position:hover{background-color:#e8f2ff}#home-position i{color:#2979d9}#enable-motors{border-color:#3db07a}#enable-motors:hover{background-color:#e6f6ee}#enable-motors i{color:#27855a}#disable-motors{border-color:#f0a528}#disable-motors:hover{background-color:#fff8e6}#disable-motors i{color:#c07d10}#emergency-stop{border-color:#e8473f}#emergency-stop:hover{background-color:#fdecea}#emergency-stop i{color:#c0201a}.quick-btn i{font-size:14px;display:block;margin-bottom:4px}.quick-btn span{font-size:10px;color:#495057;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2}.log-controls{display:flex;gap:6px;margin-bottom:10px;justify-content:flex-end}.message-log{max-height:180px;overflow-y:auto;background-color:#1e1e2e;border:1px solid #2d2d44;border-radius:6px;padding:10px 12px}.log-item{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;line-height:1.5;display:flex;align-items:baseline;gap:6px}.log-item:last-child{border-bottom:none}.timestamp{color:#5a6a8a;font-size:10px;font-family:monospace;white-space:nowrap;flex-shrink:0}.message{color:#b0bec5;word-break:break-all}.log-item.info .message{color:#64b5f6}.log-item.success .message{color:#81c784}.log-item.warning .message{color:#ffca28}.log-item.error .message{color:#ef5350}.code-controls{display:flex;gap:6px;margin-bottom:10px;justify-content:flex-end}.code-preview{background-color:#1e1e2e;border:1px solid #2d2d44;border-radius:6px;padding:12px 14px;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px;line-height:1.7;max-height:260px;overflow-y:auto;white-space:pre-wrap;color:#cdd6f4}.code-preview code{background:none;padding:0}.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);animation:fadeIn .3s ease}.modal-content{position:relative;background-color:#fff;margin:15% auto;padding:0;border-radius:8px;width:90%;max-width:500px;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:slideIn .3s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e9ecef;background-color:#f8f9fa;border-radius:8px 8px 0 0}.modal-header h3{margin:0;font-size:18px;font-weight:600;color:#212529}.modal-close{background:none;border:none;font-size:24px;font-weight:700;color:#6c757d;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.modal-close:hover{background-color:#e9ecef;color:#495057}.modal-body{padding:20px}.modal-footer{padding:16px 20px;border-top:1px solid #e9ecef;text-align:right}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.help-content{font-size:14px;line-height:1.6}.help-section{margin-bottom:20px}.help-section:last-child{margin-bottom:0}.help-section h4{color:#333;font-size:16px;font-weight:600;margin-bottom:10px;border-bottom:2px solid #667eea;padding-bottom:5px}.help-section ul{list-style:none;padding:0}.help-section li{position:relative;padding:5px 0 5px 20px}.help-section li:before{content:"•";color:#667eea;font-weight:700;position:absolute;left:0}.help-section strong{color:#333;font-weight:600}.blocklyToolboxDiv{background-color:#f8f9fa!important;border-right:1px solid #dee2e6!important;min-width:120px!important}.blocklyTreeLabel{font-size:20px!important;font-weight:700!important;padding:14px 18px!important;line-height:1.3!important;display:flex!important;align-items:center!important;color:#333!important;border-radius:6px!important;margin:3px 5px!important;transition:all .2s ease!important;transform:translate(-20px)!important}.blocklyTreeRow{min-height:48px!important;display:flex!important;align-items:center!important;cursor:pointer!important}.blocklyTreeRowContentContainer{display:flex!important;align-items:center!important;width:100%!important;padding:3px!important}.blocklyTreeRow:not(.blocklyTreeSelected):hover{background-color:#e3f2fd!important}.blocklyTreeRow:not(.blocklyTreeSelected):hover .blocklyTreeLabel{background-color:#e3f2fd!important;color:#1976d2!important;transform:translate(-15px)!important}.blocklyTreeSelected{background-color:#667eea!important;color:#fff!important;border-radius:6px!important;margin:3px 5px!important}.blocklyTreeSelected .blocklyTreeLabel{background-color:transparent!important;color:#fff!important;font-weight:700!important}.blocklyTreeIcon{width:22px!important;height:22px!important;margin-right:10px!important}.blocklyToolboxDiv::-webkit-scrollbar{width:10px!important}.blocklyToolboxDiv::-webkit-scrollbar-track{background:#f1f1f1!important;border-radius:5px!important}.blocklyToolboxDiv::-webkit-scrollbar-thumb{background:#c1c1c1!important;border-radius:5px!important}.blocklyToolboxDiv::-webkit-scrollbar-thumb:hover{background:#a8a8a8!important}.blocklyTreeRoot{padding:10px 0!important}.blocklyToolboxDiv .blocklyTreeSeparator{height:1px!important;background-color:#e0e0e0!important;margin:10px 14px!important}@media (max-width: 1200px){.main-container{grid-template-columns:1fr 300px}.right-panel{width:300px}}@media (max-width: 900px){.toolbar{padding:8px 10px;flex-wrap:wrap;height:auto;min-height:60px}.toolbar-section{gap:8px}.connection-controls input{width:120px}.main-container{grid-template-columns:1fr 250px;height:calc(100vh - 60px)}.right-panel{width:250px}.panel-content{padding:12px}}@media (max-width: 768px){.main-container{grid-template-columns:1fr;grid-template-rows:1fr}.right-panel{display:none}.left-panel{grid-column:1}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.video-controls{display:flex;gap:10px;margin-bottom:15px}.video-container{position:relative;width:100%;margin-bottom:15px;border:2px solid #ddd;border-radius:8px;overflow:hidden;background:#000}#video-feed{width:100%;height:auto;display:block}#video-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.detection-output{background:#f8f9fa;border-radius:8px;padding:15px}.detection-output h4{margin:0 0 10px;color:#333;font-size:14px;font-weight:600}.detection-data{display:flex;flex-direction:column;gap:8px}.detection-counts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}.data-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:#fff;border-radius:4px;border:1px solid #e0e0e0}.data-item.count-item{flex-direction:column;gap:4px;text-align:center}.data-label{font-weight:500;color:#555;font-size:12px}.data-value{font-weight:600;color:#333;font-size:12px}.coordinate-output{max-height:100px;overflow-y:auto;font-size:11px;color:#666;background:#f0f0f0;padding:5px;border-radius:3px;margin-top:5px}.coordinate-output:empty:before{content:"暂无数据";color:#999;font-style:italic}@media (max-width: 900px){.video-controls{flex-direction:column}.video-container{max-height:200px}.detection-output{padding:10px}}@media (max-width: 900px){.toolbar{height:auto;padding:8px 10px;gap:6px}.toolbar-section{flex-wrap:wrap}.logo span{display:none}.program-controls,.file-controls,.connection-controls{gap:6px}}@media (max-width: 600px){.main-container{flex-direction:column}.right-panel{width:100%;max-height:40vh;overflow-y:auto}}