*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f1117;--surface: #1a1d27;--surface-2: #242736;--border: #2e3244;--text: #e1e4ed;--text-dim: #8b90a0;--accent: #6c5ce7;--accent-glow: rgba(108, 92, 231, .3);--green: #2ed573;--green-glow: rgba(46, 213, 115, .3);--yellow: #ffa502;--red: #ff4757;--orange: #ff6348;--blue: #1e90ff}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:1rem 1.5rem .75rem;border-bottom:1px solid var(--border)}.header-top{display:flex;align-items:center;justify-content:space-between}.header-title{text-align:center}.app-header h1{font-size:1.6rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:var(--text-dim);font-size:.85rem;margin-top:.15rem}.github-link{color:var(--text-dim);transition:color .2s;display:flex;align-items:center}.github-link:hover{color:var(--text)}.app-main{flex:1;display:grid;grid-template-columns:300px 1fr 300px;gap:0;min-height:0}.connection-status{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;font-size:.75rem;color:var(--text-dim)}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.green{background:var(--green);box-shadow:0 0 6px var(--green-glow)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}.cold-start-banner{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.6rem;padding:.4rem 1rem;font-size:.75rem;color:var(--yellow);background:#ffa50214;border-radius:20px;display:inline-flex}.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--yellow);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.left-panel{border-right:1px solid var(--border);padding:1rem;display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto}.exchange-selector h3,.consumer-log .log-header h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:.6rem}.exchange-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.exchange-tab{display:flex;flex-direction:column;align-items:flex-start;padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;transition:all .2s;text-align:left}.exchange-tab strong{font-size:.8rem}.exchange-tab small{font-size:.65rem;color:var(--text-dim);margin-top:.1rem}.exchange-tab:hover{border-color:var(--accent)}.exchange-tab.active{border-color:var(--accent);background:var(--accent-glow)}.explanation-box{padding:.75rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:.75rem;line-height:1.5}.explanation-box h4{font-size:.8rem;margin-bottom:.4rem;color:var(--accent)}.explanation-how{color:var(--text);margin-bottom:.5rem}.explanation-rule,.explanation-example{color:var(--text-dim);margin-bottom:.3rem;font-size:.7rem}.rule-label{font-weight:600;color:var(--text)}.message-form{display:flex;flex-direction:column;gap:.75rem}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-group label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}.form-group input{padding:.5rem .65rem;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font-size:.85rem;outline:none;transition:border-color .2s}.form-group input:focus{border-color:var(--accent)}.form-note{font-size:.72rem;color:var(--text-dim);background:var(--surface);padding:.5rem .65rem;border-radius:6px;border-left:3px solid var(--accent);line-height:1.4}.routing-key-input{font-family:SF Mono,Fira Code,monospace!important;font-size:.9rem!important;letter-spacing:.02em}.quick-keys{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem}.quick-key{padding:.2rem .5rem;font-size:.68rem;font-family:SF Mono,Fira Code,monospace;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text-dim);cursor:pointer;transition:all .15s}.quick-key:hover{border-color:var(--accent);color:var(--text)}.quick-key.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.prediction-hint{font-size:.72rem;padding:.35rem .5rem;border-radius:4px;margin-top:.2rem;font-weight:600}.prediction-hint.has-match{color:var(--blue);background:#1e90ff1a}.prediction-hint.no-match{color:var(--red);background:#ff47571a}.send-btn{padding:.6rem;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .2s}.send-btn:hover{opacity:.9}.send-btn:disabled{opacity:.5;cursor:not-allowed}.center-panel{padding:1.5rem 1rem;display:flex;align-items:center;justify-content:center;overflow:auto}.flow-diagram-wrapper{width:100%;max-width:850px;display:flex;flex-direction:column;align-items:center;gap:1rem}.flow-result{font-size:.8rem;font-weight:600;padding:.4rem 1rem;border-radius:20px;animation:fadeIn .3s}.flow-result.predicted{color:var(--blue);background:#1e90ff1f}.flow-result.confirmed{color:var(--green);background:var(--green-glow)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.flow-diagram{display:flex;align-items:center;gap:0;width:100%}.flow-column{display:flex;flex-direction:column;align-items:center;gap:1rem;flex-shrink:0}.flow-node{display:flex;flex-direction:column;align-items:center;padding:.5rem .6rem;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);min-width:90px;text-align:center;transition:all .3s}.flow-node .node-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;margin-bottom:.25rem}.producer .node-icon{background:var(--accent);color:#fff}.exchange .node-icon{background:var(--orange);color:#fff}.queue .node-icon{background:var(--blue);color:#fff}.consumer-node .node-icon{background:var(--green);color:#fff}.flow-node .node-label{font-size:.62rem;font-weight:600;word-break:break-all;line-height:1.3}.flow-node .node-type{font-size:.55rem;color:var(--text-dim)}.flow-node.predicted{border-color:var(--blue);box-shadow:0 0 12px #1e90ff40}.flow-node.confirmed{border-color:var(--green);box-shadow:0 0 14px var(--green-glow)}.flow-node.dimmed{opacity:.35}.flow-node.pulse{animation:pulse .5s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.flow-connector{display:flex;align-items:center;padding:0 .4rem}.connector-line{width:35px;height:2px;background:var(--border);transition:all .3s}.connector-line.confirmed{background:var(--green);box-shadow:0 0 6px var(--green-glow)}.flow-routes{flex:1;display:flex;flex-direction:column;gap:.6rem;padding:0 .3rem}.flow-route{display:flex;align-items:center;gap:0;position:relative;transition:opacity .3s}.flow-route.dimmed{opacity:.3}.route-line{width:65px;height:2px;background:var(--border);position:relative;flex-shrink:0;transition:all .3s}.route-line.predicted{background:var(--blue);box-shadow:0 0 6px #1e90ff4d}.route-line.confirmed{background:var(--green);box-shadow:0 0 6px var(--green-glow)}.route-line-right{width:25px;height:2px;background:var(--border);flex-shrink:0;transition:all .3s}.route-line-right.predicted{background:var(--blue);box-shadow:0 0 6px #1e90ff4d}.route-line-right.confirmed{background:var(--green);box-shadow:0 0 6px var(--green-glow)}.binding-label{position:absolute;top:-13px;left:50%;transform:translate(-50%);font-size:.55rem;color:var(--text-dim);white-space:nowrap;background:var(--bg);padding:0 .2rem;font-family:SF Mono,Fira Code,monospace}.route-info{display:flex;flex-direction:column;gap:.1rem;margin-left:.4rem;min-width:0}.match-badge{font-size:.55rem;font-weight:700;padding:.1rem .4rem;border-radius:3px;white-space:nowrap;animation:fadeIn .3s;width:fit-content}.match-badge.yes{background:#1e90ff26;color:var(--blue)}.flow-route.confirmed .match-badge.yes{background:var(--green-glow);color:var(--green)}.match-badge.no{background:#ff47571a;color:var(--red)}.match-reason{font-size:.55rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.right-panel{border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.consumer-log{flex:1;display:flex;flex-direction:column;overflow:hidden}.log-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border)}.clear-btn{padding:.25rem .6rem;font-size:.7rem;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text-dim);cursor:pointer}.clear-btn:hover{border-color:var(--red);color:var(--red)}.log-entries{flex:1;overflow-y:auto;padding:.5rem}.log-empty{text-align:center;color:var(--text-dim);font-size:.8rem;padding:3rem 1rem}.log-empty-icon{font-size:1.5rem;margin-bottom:.5rem;opacity:.4}.log-empty-hint{font-size:.7rem;margin-top:.3rem;opacity:.6}.log-entry{padding:.6rem .7rem;margin-bottom:.5rem;border-radius:8px;background:var(--surface);border-left:3px solid var(--border);animation:slideIn .3s ease-out}.log-entry.exchange-direct{border-left-color:var(--orange)}.log-entry.exchange-topic{border-left-color:var(--blue)}.log-entry.exchange-fanout{border-left-color:var(--accent)}.log-entry.exchange-default{border-left-color:var(--green)}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.log-entry-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}.log-queue{font-size:.72rem;font-weight:600;color:var(--text);font-family:SF Mono,Fira Code,monospace}.log-time{font-size:.6rem;color:var(--text-dim);opacity:.6}.log-body{font-size:.82rem;color:var(--text);padding:.3rem 0;word-break:break-word;line-height:1.4}.log-footer{font-size:.62rem;color:var(--text-dim);margin-top:.2rem}.log-footer strong{color:var(--text);font-weight:600}@media (max-width: 960px){.app-main{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.left-panel{border-right:none;border-bottom:1px solid var(--border)}.right-panel{border-left:none;border-top:1px solid var(--border);max-height:300px}.exchange-tabs{grid-template-columns:repeat(4,1fr)}}