*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#d0d8e0;-webkit-user-select:none;user-select:none;background:#111820;width:100%;height:100%;font-family:Inter,Arial,Helvetica,sans-serif;font-size:14px;line-height:1.4;overflow:hidden}#viewport-host{width:100%;height:100%;position:relative;overflow:hidden}#viewport{transform-origin:0 0;background:#16202a;width:1400px;height:700px;position:absolute}#port-canvas,#widget-layer{width:1400px;height:700px;position:absolute;inset:0}#widget-layer{pointer-events:none}#widget-layer button,#widget-layer input,#widget-layer select,#widget-layer .interactive{pointer-events:auto}.panel{background:#1a2634;border:1px solid #2a3648}#top-controls{z-index:10;border-width:0 0 1px;align-items:center;gap:10px;width:1400px;height:52px;padding:0 16px;display:flex;position:absolute;top:0;left:0}#top-controls select,#top-controls button{color:#d0d8e0;cursor:pointer;background:#1e2a3a;border:1px solid #3a4a5e;border-radius:4px;height:30px;padding:0 12px;font-family:inherit;font-size:13px}#top-controls button:hover{background:#2a3a4e}#top-controls button:active{background:#3a4a5e}#top-controls button:disabled{opacity:.4;cursor:not-allowed}#run-select{min-width:140px}#speed-select{min-width:70px}#simulation-time{font-variant-numeric:tabular-nums;color:#8cf0c0;margin-left:auto;font-size:15px;font-weight:600}#connection-status{color:#8a9ab0;font-size:12px}#details-panel{z-index:10;border-width:0 0 0 1px;width:320px;height:526px;padding:14px;position:absolute;top:52px;left:1080px;overflow-y:auto}#details-panel h2{color:#e0e8f0;letter-spacing:.5px;margin-bottom:12px;font-size:16px;font-weight:700}#details-content{color:#a0aab8;font-size:13px;line-height:1.6}#bottom-panel{z-index:10;border-width:1px 0 0;align-items:stretch;gap:12px;width:1400px;height:122px;padding:8px 16px;display:flex;position:absolute;top:578px;left:0}#timeline-area{flex-direction:column;flex:1;justify-content:center;gap:6px;max-width:640px;display:flex}#timeline{appearance:none;cursor:pointer;background:#2a3648;border-radius:3px;outline:none;width:100%;height:6px}#timeline::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#4a9eff;border-radius:50%;width:14px;height:14px}#event-summary{color:#7a8aa0;font-size:12px}#kpi-panel{align-items:center;gap:10px;display:flex}.kpi-card{background:#1e2a3a;border:1px solid #2a3648;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:150px;height:80px;padding:6px;display:flex}.kpi-value{font-variant-numeric:tabular-nums;color:#e0e8f0;font-size:26px;font-weight:700}.kpi-label{color:#7a8aa0;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;font-size:11px}.kpi-good .kpi-value{color:#4cda80}.kpi-warn .kpi-value{color:#f0c040}.kpi-critical .kpi-value{color:#e85050}