*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f1115;color:#e5e7eb;overflow:hidden}#root{height:100vh}.visualizer{height:100vh;display:flex;flex-direction:column}.header{background:#16181d;border-bottom:1px solid #2d2f36;padding:20px 30px;display:flex;justify-content:space-between;align-items:center}.header-left{display:flex;align-items:center;gap:16px}.logo{width:50px;height:50px;background:linear-gradient(135deg,#06b6d4,#2563eb);border-radius:10px;display:flex;align-items:center;justify-content:center}.title h1{font-size:22px;margin-bottom:2px}.title p{font-size:13px;color:#9ca3af}.header-right{display:flex;gap:12px}.badge{padding:8px 14px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:6px}.badge.connected{background:#10b9811a;color:#34d399}.badge.error{background:#ef44441a;color:#f87171}.badge.info{background:#1f2937;color:#d1d5db}.content{flex:1;display:flex;overflow:hidden}.panel{flex-shrink:0;border-right:1px solid #2d2f36;display:flex;flex-direction:column}.panel:last-child{border-right:none}.panel-graph{width:20%;background:#16181d}.panel-timeline{width:20%;background:#0f1115}.panel-state{width:60%;background:#16181d}.panel-header{padding:18px 24px;border-bottom:1px solid #2d2f36;flex-shrink:0}.panel-header h2{font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.panel-header p{font-size:12px;color:#6b7280}.panel-body{flex:1;overflow:auto;padding:24px}.empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#6b7280;font-size:14px}.graph-container{display:flex;align-items:center;justify-content:center;min-height:100%}.graph-container svg{max-width:100%;height:auto}.timeline-item{background:#1a1d23;border:1px solid #2d2f36;border-radius:6px;padding:12px;margin-bottom:8px;cursor:pointer;transition:all .2s}.timeline-item:hover{background:#1f2329;border-color:#3d3f46}.timeline-item.active{background:#06b6d41a;border-color:#06b6d4}.timeline-row{display:flex;align-items:center;margin-bottom:4px}.timeline-node{display:flex;align-items:center;gap:8px;flex:1}.node-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.node-name{font-family:Courier New,monospace;font-size:13px;font-weight:600}.timestamp{font-size:11px;color:#6b7280;margin-left:24px}.state-section{margin-bottom:20px}.section-title{font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}.section-title.clickable{cursor:pointer;padding:8px;margin:-8px -8px 0;border-radius:4px;transition:background .2s}.section-title.clickable:hover{background:#ffffff0d}.section-content{margin-top:12px}.json-view{background:#1a1d23;border:1px solid #2d2f36;border-radius:6px;padding:16px;font-family:Courier New,monospace;font-size:12px;overflow:auto;max-height:400px}.diff-card{background:#1a1d23;border:1px solid;border-radius:6px;padding:12px;margin-bottom:8px}.diff-card.added{border-color:#10b9814d;background:#10b9810d}.diff-card.removed{border-color:#ef44444d;background:#ef44440d}.diff-card.modified{border-color:#fbbf244d;background:#fbbf240d}.diff-title{font-size:13px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}.diff-items{font-family:Courier New,monospace;font-size:12px}.diff-item{padding:2px 0}.controls{background:#16181d;border-top:1px solid #2d2f36;padding:16px 30px;flex-shrink:0}.progress{margin-bottom:16px}.progress-bar{height:6px;background:#1a1d23;border-radius:3px;overflow:hidden;position:relative;margin-bottom:6px}.progress-fill{height:100%;background:linear-gradient(90deg,#06b6d4,#2563eb);transition:width .3s}.progress-slider{position:absolute;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.progress-text{display:flex;justify-content:space-between;font-size:12px;color:#9ca3af}.buttons{display:flex;justify-content:center;gap:10px}.btn{background:#1f2937;border:1px solid #374151;color:#fff;padding:10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn:hover:not(:disabled){background:#374151}.btn:disabled{opacity:.3;cursor:not-allowed}.btn.play{background:linear-gradient(135deg,#06b6d4,#2563eb);border:none;padding:12px}.btn.play:hover{transform:translateY(-1px)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1d23}::-webkit-scrollbar-thumb{background:#374151;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4b5563}
