@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--neon-cyan:#00e5ff;--neon-cyan-dim:#00e5ff26;--neon-purple:#bf5af2;--neon-purple-dim:#bf5af226;--neon-green:#30d158;--neon-green-dim:#30d15826;--neon-orange:#ff9f0a;--neon-orange-dim:#ff9f0a26;--neon-red:#ff453a;--neon-red-dim:#ff453a26;--bg-primary:#0a0a0f;--bg-panel:#0c0c14e0;--border-glow:#00e5ff33;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-sans);background:var(--bg-primary);color:#e0e0e0;overflow:hidden}#root{width:100vw;height:100vh;position:relative;overflow:hidden}.step-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#0a0a0fd9;border:1px solid #bf5af24d;border-radius:16px;flex-direction:column;gap:10px;width:400px;padding:14px 20px;display:flex;position:absolute;bottom:24px;right:360px;box-shadow:0 8px 32px #0006,0 0 16px #bf5af21a}.step-progress{gap:8px;margin-bottom:4px;display:flex}.step-dot{background:#ffffff1a;border-radius:2px;flex:1;height:4px;transition:all .3s}.step-dot.done{background:#bf5af280}.step-dot.active{background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)}.step-info{align-items:baseline;gap:12px;display:flex}.step-number{font-family:var(--font-mono);color:var(--neon-cyan);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:600}.step-label{color:#fff;letter-spacing:.5px;font-size:1.1rem;font-weight:600}.step-desc{font-family:var(--font-mono);color:#aaa;font-size:.8rem;line-height:1.5}.connection-flow.glow-active{stroke:var(--neon-cyan)!important;stroke-width:3.5px!important;filter:drop-shadow(0 0 8px #00e5ffcc)!important;animation-duration:.5s!important}.node-card.active .node-bg{stroke:var(--neon-cyan);stroke-width:2.5px;filter:drop-shadow(0 0 12px #00e5ff99)}.grid-bg{z-index:0;pointer-events:none;background-image:linear-gradient(#00e5ff08 1px,#0000 1px),linear-gradient(90deg,#00e5ff08 1px,#0000 1px);background-size:60px 60px;position:fixed;inset:0}.grid-bg:after{content:"";background:radial-gradient(80% 60% at 50% 40%,#00e5ff0a,#0000 70%),radial-gradient(60% 50% at 20% 80%,#bf5af208,#0000 60%);position:absolute;inset:0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#00e5ff4d;border-radius:3px}.app-container{z-index:1;flex-direction:column;width:100%;height:100%;display:flex;position:relative}.header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-glow);z-index:10;background:#0a0a0fb3;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.header-title{align-items:center;gap:14px;display:flex}.header-title h1{letter-spacing:1.5px;color:var(--neon-cyan);text-shadow:0 0 20px #00e5ff80;text-transform:uppercase;font-size:1.4rem;font-weight:700}.header-title .subtitle{color:#555;letter-spacing:.5px;font-size:.85rem;font-weight:400}.repo-link{color:#ccc;text-transform:uppercase;letter-spacing:1px;background:#ffffff08;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-size:.8rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.repo-link:hover{color:#fff;background:#ffffff14;border-color:#ffffff4d;transform:translateY(-1px)}.status-pill{letter-spacing:1px;text-transform:uppercase;border-radius:20px;align-items:center;gap:8px;padding:6px 16px;font-size:.8rem;font-weight:600;display:flex}.status-pill.healthy{background:var(--neon-green-dim);color:var(--neon-green);border:1px solid #30d15866}.status-pill.degraded{background:var(--neon-red-dim);color:var(--neon-red);border:1px solid #ff453a66;animation:1s infinite status-pulse}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.6}}.status-dot{border-radius:50%;width:8px;height:8px}.status-dot.healthy{background:var(--neon-green);box-shadow:0 0 8px var(--neon-green)}.status-dot.degraded{background:var(--neon-red);box-shadow:0 0 8px var(--neon-red);animation:1s infinite status-pulse}.main-area{flex:1;display:flex;position:relative;overflow:hidden}.network-canvas{flex:1;justify-content:center;align-items:center;display:flex;position:relative}.network-canvas svg{width:100%;height:100%}.sidebar{border-left:1px solid var(--border-glow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#08080e99;flex-direction:column;flex-shrink:0;gap:0;width:340px;display:flex;overflow:hidden}.panel-section{border-bottom:1px solid #ffffff0d;padding:18px 20px}.panel-section:last-child{border-bottom:none;flex-direction:column;flex:1;display:flex;overflow:hidden}.panel-label{text-transform:uppercase;letter-spacing:2px;color:#555;margin-bottom:14px;font-size:.7rem;font-weight:600}.metric-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.metric-card{background:#ffffff08;border:1px solid #ffffff0f;border-radius:10px;flex-direction:column;gap:4px;padding:12px 14px;display:flex}.metric-card .label{text-transform:uppercase;letter-spacing:1.5px;color:#666;font-size:.65rem}.metric-card .value{font-size:1.3rem;font-weight:700;font-family:var(--font-mono)}.metric-card .value.cyan{color:var(--neon-cyan);text-shadow:0 0 10px #00e5ff4d}.metric-card .value.purple{color:var(--neon-purple);text-shadow:0 0 10px #bf5af24d}.metric-card .value.green{color:var(--neon-green);text-shadow:0 0 10px #30d1584d}.metric-card .value.orange{color:var(--neon-orange);text-shadow:0 0 10px #ff9f0a4d}.metric-card .value.red{color:var(--neon-red);text-shadow:0 0 10px #ff453a4d}.control-row{margin-bottom:18px}.control-row:last-child{margin-bottom:0}.control-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.control-header .name{color:#ccc;font-size:.8rem;font-weight:500}.control-header .val{font-family:var(--font-mono);font-size:.85rem;font-weight:600}.control-desc{color:#555;margin-top:4px;font-size:.7rem}input[type=range]{appearance:none;background:#ffffff14;border-radius:2px;outline:none;width:100%;height:4px;transition:background .2s}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--neon-cyan);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:all .2s;box-shadow:0 0 12px #00e5ff80}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px #00e5ffb3}.warning-box{background:var(--neon-red-dim);color:var(--neon-red);border:1px solid #ff453a4d;border-radius:8px;margin-top:12px;padding:10px 12px;font-size:.75rem;line-height:1.4;animation:2s infinite warning-glow}@keyframes warning-glow{0%,to{box-shadow:0 0 #ff453a00}50%{box-shadow:0 0 15px #ff453a26}}.terminal-header{background:#0006;border-bottom:1px solid #ffffff0a;flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.terminal-dots{gap:5px;display:flex}.terminal-dots span{border-radius:50%;width:8px;height:8px;display:inline-block}.terminal-title{font-family:var(--font-mono);color:#555;text-transform:uppercase;letter-spacing:1.5px;font-size:.7rem}.terminal-body{font-family:var(--font-mono);flex:1;padding:10px 14px;font-size:.72rem;line-height:1.6;overflow-y:auto}.log-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.log-line .timestamp{color:#444;margin-right:6px}.log-line.info{color:var(--neon-green)}.log-line.error{color:var(--neon-red)}.log-line.warn{color:var(--neon-orange)}.log-line.vault{color:var(--neon-purple)}@keyframes flow-dash{to{stroke-dashoffset:-40px}}@keyframes flow-dash-reverse{to{stroke-dashoffset:40px}}@keyframes glow-pulse{0%,to{opacity:.6}50%{opacity:1}}.connection-bg{fill:none;stroke-width:1.5px;stroke:#ffffff0a}.connection-flow{fill:none;stroke-width:2px;stroke-linecap:round;stroke-dasharray:8 12;animation:linear infinite flow-dash}.connection-flow.reverse{animation-name:flow-dash-reverse}.connection-flow.cyan{stroke:var(--neon-cyan);filter:drop-shadow(0 0 4px #00e5ff80)}.connection-flow.green{stroke:var(--neon-green);filter:drop-shadow(0 0 4px #30d15880)}.connection-flow.purple{stroke:var(--neon-purple);filter:drop-shadow(0 0 4px #bf5af280);stroke-dasharray:4 16}.connection-flow.orange{stroke:var(--neon-orange);filter:drop-shadow(0 0 4px #ff9f0a80);stroke-dasharray:4 16}.connection-flow.red{stroke:var(--neon-red);filter:drop-shadow(0 0 6px #ff453a99);stroke-width:3px}.connection-flow.thick{stroke-width:3px;stroke-dasharray:14 8}.node-card{cursor:default;transition:filter .3s}.node-card:hover{filter:brightness(1.2)}.node-bg{rx:10;ry:10;fill:#0c0c14e6;stroke-width:1.5px;transition:all .3s}.node-bg.cyan{stroke:var(--neon-cyan);filter:drop-shadow(0 0 6px #00e5ff40)}.node-bg.purple{stroke:var(--neon-purple);filter:drop-shadow(0 0 8px #bf5af24d)}.node-bg.green{stroke:var(--neon-green);filter:drop-shadow(0 0 6px #30d15840)}.node-bg.orange{stroke:var(--neon-orange);filter:drop-shadow(0 0 6px #ff9f0a40)}.node-bg.red{stroke:var(--neon-red);filter:drop-shadow(0 0 10px #ff453a66)}.node-icon{text-anchor:middle;dominant-baseline:middle;font-size:22px}.node-label{font-family:var(--font-sans);fill:#fff;text-anchor:middle;dominant-baseline:middle;font-size:13px;font-weight:600}.node-sublabel{font-family:var(--font-mono);fill:#666;text-anchor:middle;dominant-baseline:middle;letter-spacing:.5px;font-size:9px}@keyframes travel-particle{0%{offset-distance:0%;opacity:0}5%{opacity:1}95%{opacity:1}to{offset-distance:100%;opacity:0}}.particle{offset-rotate:0deg;r:3;opacity:0;animation:linear infinite travel-particle}.particle.cyan{fill:var(--neon-cyan);filter:drop-shadow(0 0 6px var(--neon-cyan))}.particle.green{fill:var(--neon-green);filter:drop-shadow(0 0 6px var(--neon-green))}.particle.purple{fill:var(--neon-purple);filter:drop-shadow(0 0 6px var(--neon-purple))}.particle.orange{fill:var(--neon-orange);filter:drop-shadow(0 0 6px var(--neon-orange))}@keyframes router-breathe{0%,to{filter:drop-shadow(0 0 8px #bf5af24d)}50%{filter:drop-shadow(0 0 16px #bf5af280)}}.router-node .node-bg{animation:3s ease-in-out infinite router-breathe}@keyframes overload-shake{0%,to{transform:translate(0)}20%{transform:translate(-1.5px)}40%{transform:translate(1.5px)}60%{transform:translate(-1px)}80%{transform:translate(1px)}}.node-card.overloaded{animation:.4s infinite overload-shake}.node-card.overloaded .node-bg{animation:none;stroke:var(--neon-red)!important;filter:drop-shadow(0 0 12px #ff453a80)!important}