@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap";.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}:root{--bg: oklch(.18 .026 255);--surface-1: oklch(.225 .028 254);--surface-2: oklch(.245 .03 252);--surface-3: oklch(.275 .035 251);--line: oklch(.36 .03 252);--line-soft: oklch(.305 .025 252);--text: oklch(.94 .02 250);--muted: oklch(.75 .03 250);--accent: oklch(.73 .11 258);--success: oklch(.76 .14 161);--error: oklch(.68 .19 25);--slow: oklch(.79 .14 83);--ring: color-mix(in srgb, var(--accent) 75%, white 25%);--ease-smooth: cubic-bezier(.22, 1, .36, 1);--ease-quick: cubic-bezier(.25, 1, .5, 1)}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;min-height:100%;background:radial-gradient(circle at 8% 6%,color-mix(in oklab,var(--accent) 24%,transparent) 0%,transparent 36%),radial-gradient(circle at 84% -12%,color-mix(in oklab,var(--success) 16%,transparent) 0%,transparent 34%),linear-gradient(165deg,color-mix(in oklab,var(--bg) 94%,#060a10 6%) 0%,var(--bg) 68%);color:var(--text);font-family:Manrope,Segoe UI,sans-serif;line-height:1.35}body{text-rendering:geometricPrecision}.app-shell{min-height:100vh;display:grid;grid-template-rows:68px 1fr;position:relative;isolation:isolate}.app-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(146,170,209,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(146,170,209,.018) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 56% 20%,black 26%,transparent 76%);mask-image:radial-gradient(circle at 56% 20%,black 26%,transparent 76%);z-index:-1}.app-shell.view-business{--accent: oklch(.74 .11 258)}.app-shell.view-infra{--accent: oklch(.72 .09 222)}.topbar{border-bottom:1px solid var(--line-soft);background:color-mix(in oklab,var(--surface-1) 90%,#060b10 10%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px}.brand-block{display:flex;align-items:center;gap:14px}.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px #8ba8ff26}.brand-text{display:flex;align-items:center;gap:16px}.brand-name{margin:0;font-family:Sora,Manrope,sans-serif;font-size:16px;font-weight:700;letter-spacing:.015em;color:#fff}.app-mode-tabs{display:flex;gap:4px;background:#0e151f99;padding:4px;border-radius:8px;border:1px solid rgba(63,80,110,.3)}.app-tab{background:transparent;border:none;font-family:Manrope,sans-serif;font-size:12.5px;font-weight:600;color:#7b94ba;padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .15s var(--ease-quick)}.app-tab:hover{color:#a7c1e8}.app-tab.active{background:#2a3d58;color:#fff;box-shadow:0 2px 4px #0000001a}.topbar-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:flex-end}.stats-row{display:flex;flex-direction:column;gap:6px;margin-left:12px;padding-left:16px;border-left:1px solid var(--line-soft)}.stats-snapshot-label{font-size:11px;font-weight:700;text-transform:uppercase;color:#7b94ba;letter-spacing:.05em;margin-left:6px}.stats-pills{display:flex;gap:10px}.top-stat{font-size:14px;font-weight:600;color:#d1dceb;background:#212e4266;border:1px solid #3f5475;border-radius:8px;padding:6px 14px;white-space:nowrap;box-shadow:0 2px 8px #00000026}.top-stat-error{color:#ffbaba;background:#5212124d;border-color:#e4575799;box-shadow:0 0 12px #e457571a}.top-stat-slow{color:#f7d581;background:#523c124d;border-color:#d6af4b99;box-shadow:0 0 12px #d6af4b1a}.input{height:40px;min-width:260px;border:1px solid var(--line);outline:none;border-radius:8px;background:color-mix(in oklab,var(--surface-1) 86%,#09101a 14%);color:var(--text);padding:0 14px;font-size:13.5px;transition:border-color .18s var(--ease-quick),background .18s var(--ease-quick),box-shadow .18s var(--ease-quick)}.input:focus{border-color:color-mix(in srgb,var(--accent) 60%,var(--line) 40%);background:color-mix(in oklab,var(--surface-1) 95%,#09101a 5%)}.input:focus-visible,.button:focus-visible,.chip:focus-visible,.trace-row:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.input-select{min-width:140px;cursor:pointer}.mode-toggle{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:8px;padding:4px;background:color-mix(in oklab,var(--surface-1) 84%,#09101a 16%)}.mode-chip{border:none;background:transparent;color:#9fb4d0;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:background .18s var(--ease-quick),color .18s var(--ease-quick),transform .18s var(--ease-quick)}.mode-chip-active{background:color-mix(in oklab,var(--accent) 30%,#1a283e 70%);color:#fff;box-shadow:0 1px 3px #0003}.mode-chip:hover:not(.mode-chip-active){background:#ffffff0d}.button{display:flex;align-items:center;height:44px;padding:0 20px;border-radius:10px;border:1px solid var(--line);background:#2b384cb3;color:#eef3fb;font-size:14.5px;font-weight:600;cursor:pointer;transition:border-color .18s var(--ease-quick),transform .18s var(--ease-quick),background .18s var(--ease-quick),box-shadow .18s var(--ease-quick);box-shadow:0 2px 6px #00000026}.button:hover:not(:disabled){border-color:#516d96;background:#2c3e5ae6;color:#fff}.button:active:not(:disabled){transform:translateY(1px)}.graph-control-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:6px;color:#a0aec0;cursor:pointer;transition:all .15s ease}.graph-control-btn:hover:not(:disabled){background:#ffffff1a;color:#fff}.graph-control-btn:disabled{opacity:.3;cursor:not-allowed}.button-live{border-color:color-mix(in srgb,var(--success) 55%,var(--line) 45%);color:color-mix(in srgb,var(--success) 80%,white 20%);box-shadow:0 0 0 1px color-mix(in srgb,var(--success) 20%,transparent 80%);animation:pulse-live 2.2s var(--ease-smooth) infinite}@keyframes pulse-live{0%{box-shadow:0 0 #7be2b266}70%{box-shadow:0 0 0 6px #7be2b200}to{box-shadow:0 0 #7be2b200}}.button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button-replay{background:color-mix(in oklab,var(--accent) 35%,#1a283e 65%);border-color:color-mix(in srgb,var(--accent) 55%,var(--line) 45%);color:#fff;font-weight:700;box-shadow:0 4px 12px #0003,0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent 80%)}.button-replay:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 50%,#1a283e 50%);border-color:var(--accent);box-shadow:0 6px 16px #0000004d,0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent 75%);transform:translateY(-1px)}.button-loading{position:relative;color:transparent!important;pointer-events:none}.button-loading:after{content:"";position:absolute;width:18px;height:18px;top:50%;left:50%;margin-top:-9px;margin-left:-9px;border:2px solid rgba(255,255,255,.2);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto-select-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;background:#0e151f99;padding:8px 10px;border-radius:8px;border:1px solid rgba(63,80,110,.3);transition:all .15s var(--ease-quick)}.auto-select-toggle:hover{background:#141e30cc;border-color:#3f506e99}.auto-select-toggle input{margin:0;cursor:pointer;accent-color:var(--accent)}.toggle-label{font-size:11px;color:#a2b7d6;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.layout-grid{display:grid;grid-template-columns:320px 1fr 360px;min-height:0;height:calc(100vh - 68px)}.panel{border-right:1px solid var(--line-soft);background:linear-gradient(180deg,#111824f2,#0e141ef0);min-height:0;animation:panel-enter .42s var(--ease-smooth) both}.layout-grid>.panel:nth-child(1){animation-delay:20ms}.layout-grid>.panel:nth-child(2){animation-delay:90ms}.layout-grid>.panel:nth-child(3){animation-delay:.15s}.panel:last-child{border-right:none}.panel-header{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line-soft)}.trace-header-meta{display:flex;align-items:center;gap:8px}.keyboard-hint{color:#90a9cd;border:1px solid #304462;border-radius:6px;font-size:10px;padding:2px 6px;letter-spacing:.04em;text-transform:uppercase}.graph-caption{margin:0;font-size:12px;color:#9fb4d0;max-width:74%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view-mode-badge{display:inline-block;padding:2px 7px;border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;margin-right:6px}.view-mode-business{color:#a6e6c5;border:1px solid rgba(46,190,128,.35);background:#2ebe8029}.view-mode-infra{color:#b3c6e8;border:1px solid rgba(139,168,255,.35);background:#8ba8ff29}.panel-header h2{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#d3deef}.muted{color:var(--muted);font-size:12px}.explorer-panel{display:flex;flex-direction:column}.filter-row{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line-soft)}.chip{border:1px solid #2a374d;background:#0f1521;color:#b6c6de;border-radius:999px;padding:6px 11px;font-size:11px;cursor:pointer}.chip-active{border-color:#4f6c95;color:#dbe7fa}.trace-list{overflow-y:auto;padding:8px}.trace-list::-webkit-scrollbar,.inspector-body::-webkit-scrollbar{width:10px}.trace-list::-webkit-scrollbar-thumb,.inspector-body::-webkit-scrollbar-thumb{background:#2a3950;border-radius:999px;border:2px solid #101824}.trace-row{width:100%;border:1px solid transparent;background:transparent;color:inherit;text-align:left;border-radius:8px;padding:12px;margin-bottom:6px;cursor:pointer;position:relative;transition:all .16s var(--ease-quick)}@keyframes slide-down-fade{0%{opacity:0;transform:translateY(-12px);box-shadow:inset 0 0 0 2px var(--success),0 0 20px #7be2b266}to{opacity:1;transform:translateY(0);box-shadow:inset 0 0 0 0 var(--success),0 0 #7be2b200}}.trace-row-new{animation:slide-down-fade 1.2s var(--ease-quick) forwards}.new-badge{font-size:9px;background:#7be2b226;color:#a6e6c5;border:1px solid rgba(46,190,128,.3);padding:2px 4px;border-radius:4px;margin-left:6px;font-weight:700;letter-spacing:.05em;animation:fade-out 3s ease forwards}@keyframes fade-out{0%,70%{opacity:1}to{opacity:0;display:none}}.trace-row:hover{background:#131d2b;border-color:#2c3f58}.trace-row-active{background:#172436;border-color:#3e567a;box-shadow:0 4px 12px #00000026}.trace-row-success.trace-row-active{box-shadow:inset 3px 0 0 0 var(--success),0 4px 12px #00000026}.trace-row-error.trace-row-active{box-shadow:inset 3px 0 0 0 var(--error),0 4px 12px #00000026;background:linear-gradient(90deg,#1f1414,#131d2b)}.trace-row-slow.trace-row-active{box-shadow:inset 3px 0 0 0 var(--slow),0 4px 12px #00000026}.trace-row-main{display:flex;align-items:center;gap:10px;margin-bottom:6px}.trace-row-sub{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#abc0df;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.trace-row-sub .duration{font-weight:600;color:#dce8fc}.trace-row-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.04);padding-top:8px;color:#7b94ba;font-size:10.5px}.status-indicator{width:8px;height:8px;border-radius:50%;margin-left:auto}.indicator-success{background:var(--success);box-shadow:0 0 6px #7be2b266}.indicator-error{background:var(--error);box-shadow:0 0 6px #ff9d9d66}.indicator-slow{background:var(--slow);box-shadow:0 0 6px #f0d28a66}.trace-signal{border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.04em;padding:2px 5px}.trace-signal-business{color:#9ce8c8;border:1px solid rgba(46,190,128,.36);background:#2ebe8021}.trace-signal-infra{color:#a9c0e7;border:1px solid rgba(139,168,255,.32);background:#8ba8ff24}.trace-signal-db{color:#f2d598;border:1px solid rgba(214,175,75,.36);background:#d6af4b21}.method{font-size:11px;letter-spacing:.04em;color:#99b4ff;border:1px solid #2f4770;border-radius:5px;padding:3px 6px;font-weight:600}.route{font-size:13px;font-weight:500}.status-pill{margin-left:auto;border-radius:999px;padding:2px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.status-success,.status-success.status-pill,.status-success-pill,.status-success.status-success{background:#2ebe802e;color:#7be2b2;border:1px solid rgba(46,190,128,.3)}.status-error,.status-error.status-pill{background:#e4575729;color:#ff9d9d;border:1px solid rgba(228,87,87,.34)}.status-slow,.status-slow.status-pill{background:#d6af4b29;color:#f0d28a;border:1px solid rgba(214,175,75,.35)}.graph-panel{display:flex;flex-direction:column}.graph-canvas{flex:1;min-height:0;position:relative;background:radial-gradient(circle at center,#0f1520,#060a10)}.mode-empty-hint{position:absolute;top:14px;left:14px;z-index:3;border:1px dashed #34506f;background:#0b111be0;color:#a9bddb;border-radius:8px;padding:8px 10px;font-size:12px}.layer-rails{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);z-index:1}.layer-rails span{border-right:1px dashed rgba(63,80,110,.35);color:#7488ab;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:12px 14px;display:flex;align-items:flex-start;background:linear-gradient(180deg,#141e304d,#141e3000)}.layer-rails span:last-child{border-right:none}.trace-node{width:240px;border:1px solid #2a3850;border-radius:12px;background:linear-gradient(180deg,#111a28,#0c121c);padding:14px;transition:all .2s var(--ease-quick);box-shadow:0 4px 12px #0003}.trace-node:hover{border-color:#4c6691;box-shadow:0 6px 16px #0000004d,0 0 0 1px #4c669166;transform:translateY(-2px)}.trace-node-selected{border-color:#87a3e6;box-shadow:0 0 0 2px #87a3e640;transform:translateY(-2px)}.trace-node-error{border-color:#e45757a6;border-width:2px;padding:13px;background:linear-gradient(180deg,#1f1414,#130a0a)}.trace-node-slow{border-color:#d6af4b99;box-shadow:0 0 0 1px #d6af4b26}.trace-node-faded{opacity:.3;filter:saturate(.5)}.trace-node-infra{opacity:.8}.trace-node-main{box-shadow:0 0 20px #87a3e614}.trace-node-header{display:flex;align-items:center;gap:8px}.trace-node-layer{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.trace-node-step{margin:10px 0 6px;font-size:13.5px;font-weight:700;color:#e5efff;line-height:1.3}.trace-node-meta{margin:0;color:#8496b0;font-size:11px}.node-duration-meta{color:#b0c4e8;font-weight:600}.trace-handle{width:8px;height:8px;border:1px solid #7289ad;background:#c4d4f0}.inspector-panel{display:flex;flex-direction:column}.inspector-body{padding:14px;overflow-y:auto}.span-summary{border:1px solid #2d3f5b;border-radius:10px;background:#111a28;padding:16px;margin-bottom:24px;position:relative;overflow:hidden}.span-summary:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#3e5a85}.span-summary.status-success:before{background:var(--success)}.span-summary.status-error:before{background:var(--error)}.span-summary.status-slow:before{background:var(--slow)}.span-summary-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.span-title{margin:0;font-size:16px;font-weight:700;color:#e2ecfd;line-height:1.35;word-break:break-word}.span-subtitle{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#7b94ba}.inspector-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;color:#7189ad}.inspector-empty-icon{width:48px;height:48px;border-radius:12px;background:#131c2a;border:1px solid #28374f;display:grid;place-items:center;margin-bottom:16px;color:#516b94;box-shadow:inset 0 2px 4px #ffffff05}.empty-title{margin:0 0 6px;font-size:14px;font-weight:600;color:#dce8fc}.empty-desc{margin:0;font-size:12.5px;line-height:1.5;max-width:240px}.inspector-field{margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}.inspector-label{margin:0 0 5px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.inspector-value{margin:0;font-size:14px;word-break:break-word}.inspector-block{margin-top:20px}.metadata-block{margin:0;border:1px solid #2a3951;background:#0f1621;border-radius:10px;padding:10px;color:#abc0de;font-size:12px;line-height:1.45;overflow-x:auto}.metadata-empty{border:1px dashed #324864;border-radius:9px;padding:10px;color:#95a9c9;font-size:12px}.metadata-list{border:1px solid #2a3d58;border-radius:10px;overflow:hidden}.metadata-row{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:9px 10px;background:#0f1621;border-bottom:1px solid #223148}.metadata-row:last-child{border-bottom:none}.metadata-key{font-size:11px;color:#8ea5c8;text-transform:uppercase;letter-spacing:.05em}.metadata-value{font-size:12px;color:#d4e3fb;word-break:break-word}.quick-jump-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#060a0fa8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:grid;place-items:start center;padding-top:12vh}.quick-jump-modal{width:min(860px,calc(100vw - 28px));border:1px solid #2c3c54;border-radius:12px;background:#0f1622;box-shadow:0 18px 42px #00000061}.quick-jump-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #223149}.quick-jump-title{margin:0;font-family:Sora,Manrope,sans-serif;font-size:13px;letter-spacing:.03em;color:#dce8fb}.quick-jump-input{width:calc(100% - 24px);margin:12px;min-width:0}.quick-jump-list{padding:0 10px 10px;max-height:380px;overflow-y:auto}.quick-jump-row{width:100%;border:1px solid transparent;border-radius:10px;padding:9px 10px;margin-bottom:6px;display:grid;grid-template-columns:70px 1fr auto auto auto;gap:10px;align-items:center;text-align:left;background:transparent;color:inherit;cursor:pointer;transition:background .14s var(--ease-quick),border-color .14s var(--ease-quick),transform .14s var(--ease-quick)}.quick-jump-row:hover{background:#141f2f;border-color:#324560;transform:translateY(-1px)}.quick-jump-row-active{background:#18263a;border-color:#46608a}.quick-jump-route{font-size:13px;color:#dce8fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:24px;margin:14px;border:1px dashed #2f415d;border-radius:10px;color:#7189ad;font-size:13px;text-align:center;background:#121a2966}.panel-message{display:grid;place-items:center;color:#9cb0ce;font-size:14px}.panel-error{color:#ff9c9c}.status-success{background:#2ebe802e;color:#7be2b2}.status-error{background:#e4575729;color:#ff9d9d}.status-slow{background:#d6af4b29;color:#f0d28a}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}@keyframes panel-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-live{0%,to{box-shadow:0 0 #2ebe8038}50%{box-shadow:0 0 0 6px #2ebe8000}}@media (max-width: 1240px){.layout-grid{grid-template-columns:280px 1fr;grid-template-rows:1fr 320px}.inspector-panel{grid-column:1 / -1;border-top:1px solid var(--line-soft);border-right:none}}@media (max-width: 920px){.topbar{flex-direction:column;align-items:stretch;height:auto;padding:10px}.topbar-controls{justify-content:flex-start;flex-wrap:wrap}.stats-row{margin-left:0}.input{min-width:180px;flex:1}.layout-grid{height:auto;grid-template-columns:1fr;grid-template-rows:340px 500px 420px}.panel{border-right:none;border-bottom:1px solid var(--line-soft)}.layer-rails{display:none}.metadata-row{grid-template-columns:1fr;gap:5px}.quick-jump-row{grid-template-columns:62px 1fr;grid-auto-rows:auto}}.layout-grid-compare{grid-template-columns:340px 1fr!important}.compare-workspace{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;background:color-mix(in oklch,var(--surface-0) 90%,#000 10%)}.compare-hero{padding:24px 32px;border-bottom:1px solid var(--line);background:radial-gradient(circle at top left,color-mix(in oklch,var(--accent) 15%,transparent) 0%,transparent 100%)}.compare-title{margin:0 0 8px;font-family:Sora,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.01em;color:#fff}.compare-subtitle{margin:0;font-size:14px;color:#a2b7d6;line-height:1.5}.compare-split-view{display:flex;flex:1;min-height:0;min-width:0}.compare-graph-container{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}.compare-graph-container:first-child{border-right:1px solid var(--line)}.compare-panel-header{padding:12px 24px;display:flex;align-items:center;gap:12px;background:#0e151fcc;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;color:#e5efff}.compare-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:12px;font-weight:800;color:#fff}.compare-badge-a{background:#3b82f6;box-shadow:0 0 10px #3b82f666}.compare-badge-b{background:#8b5cf6;box-shadow:0 0 10px #8b5cf666}.trace-row-compare-a{box-shadow:inset 3px 0 #3b82f6,0 4px 12px #0000001a!important;background:linear-gradient(90deg,rgba(59,130,246,.08),transparent)!important;border-color:#3b82f64d!important}.trace-row-compare-b{box-shadow:inset 3px 0 #8b5cf6,0 4px 12px #0000001a!important;background:linear-gradient(90deg,rgba(139,92,246,.08),transparent)!important;border-color:#8b5cf64d!important}.compare-actions{display:flex;gap:4px;margin-left:auto}.compare-btn{background:#212e4299;border:1px solid #3f5575;color:#abc0df;border-radius:6px;width:32px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;font-size:12px;transition:all .15s var(--ease-quick)}.compare-btn:hover{background:#2a3d58;color:#fff}.compare-btn.active{background:var(--accent);color:#fff;border-color:#9cb4db}.trace-node-shared{opacity:.35;filter:grayscale(1)}.trace-node-unique{box-shadow:0 0 0 2px #8ba8ff66,0 4px 24px #8ba8ff26}.trace-node-unique.trace-node-error{box-shadow:0 0 0 2px #e4575799,0 4px 24px #e4575733}.graph-caption{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;color:#8c9eb9}.caption-method{font-weight:600;color:#cfdcf0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.caption-duration{color:#a2b7d6}.trace-id-copy{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:#1e293b66;border:1px solid rgba(63,80,110,.3);border-radius:6px;color:#9cb4db;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,monospace;cursor:pointer;transition:all .15s var(--ease-quick)}.trace-id-copy:hover{background:#2c3e5a99;border-color:#516d9699;color:#fff}.trace-id-copy.copied{background:#10b98126;border-color:#10b98166;color:#34d399}.copy-text{font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.05em}.compare-hero{padding:32px 40px;border-bottom:1px solid var(--line);background:radial-gradient(circle at top left,color-mix(in oklch,var(--accent) 15%,transparent) 0%,transparent 100%)}.compare-hero-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.compare-title{margin:0;font-family:Sora,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.01em;color:#fff}.compare-hero-actions{display:flex;gap:12px}.button-secondary{background:#2c3e5a99;color:#cfdcf0;border-color:#516d9699;height:38px;padding:0 16px;display:inline-flex;align-items:center;gap:8px}.button-secondary:hover:not(:disabled){background:#3b5277cc;color:#fff}.button-danger{background:#e457571a;color:#f8aaaa;border-color:#e457574d;height:38px;padding:0 16px}.button-danger:hover:not(:disabled){background:#e4575733;color:#ffc4c4;border-color:#e4575780}.compare-select{flex:1;max-width:480px;height:36px;font-size:13px;background:#0e151f99;border-color:#3f506e80;color:#e5efff}.compare-empty-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;color:#728baf;padding:40px}.compare-empty-state h3{color:#e5efff;margin:16px 0 8px;font-size:18px}.compare-badge-large{width:48px;height:48px;font-size:20px;border-radius:12px;opacity:.8}.trace-list{padding:12px;display:flex;flex-direction:column;gap:8px}.trace-row{border-radius:8px;padding:14px 16px;border:1px solid rgba(63,80,110,.2);background:#0e151f66;transition:all .15s var(--ease-quick);cursor:pointer;text-align:left}.trace-row:hover{background:#212e4266;border-color:#3f506e66;transform:translateY(-1px)}.trace-row-active{background:#2c3e5a66;border-color:#8ba8ff4d;box-shadow:0 4px 12px #0000001a}.trace-row-error{border-left:3px solid var(--error)}.trace-row-success{border-left:3px solid transparent}.inspector-empty{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;height:100%!important;padding:40px 24px!important;text-align:center!important;color:var(--muted)!important}.inspector-empty-icon{margin-bottom:20px!important;color:#516d96!important;background:#212e4266!important;padding:20px!important;border-radius:16px!important;box-shadow:inset 0 2px #ffffff0d,0 8px 24px #0003!important}.inspector-empty .empty-title{margin:0 0 10px!important;color:#cfdcf0!important;font-size:18px!important;font-weight:700!important;letter-spacing:-.01em!important}.inspector-empty .empty-desc{margin:0!important;color:#728baf!important;font-size:13.5px!important;line-height:1.5!important;max-width:260px!important}.trace-combo{position:relative;flex:1;max-width:520px}.trace-combo-input-wrapper{position:relative;display:flex;align-items:center}.trace-combo-input{width:100%;padding-right:36px;background:#0e151f99;border-color:#3f506e66}.trace-combo-icon{position:absolute;right:12px;color:#728baf;pointer-events:none;transition:transform .15s var(--ease-quick)}.trace-combo-icon.open{transform:rotate(180deg)}.trace-combo-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;background:#111a28;border:1px solid rgba(63,80,110,.6);border-radius:8px;box-shadow:0 10px 40px #0009;max-height:280px;overflow-y:auto;z-index:1000;display:flex;flex-direction:column;padding:6px}.trace-combo-item{display:flex;align-items:center;gap:12px;padding:8px 12px;width:100%;background:transparent;border:none;border-radius:6px;color:#cfdcf0;cursor:pointer;text-align:left;transition:background .15s var(--ease-quick)}.trace-combo-item:hover:not(:disabled){background:#2c3e5a80}.trace-combo-item.active{background:#3b82f626;color:#fff}.trace-combo-item:disabled{opacity:.3;cursor:not-allowed}.combo-item-method{font-weight:700;font-size:11px;color:#9cb4db;min-width:44px}.combo-item-route{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.combo-item-id{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:#728baf}.trace-combo-empty{padding:12px;font-size:12px;color:#728baf;text-align:center}.compare-graph-container .graph-panel{flex:1;border-right:none;border-bottom:none;background:transparent;border-radius:0}.compare-btn-a.active{background:#3b82f6!important;border-color:#60a5fa!important;color:#fff!important}.compare-btn-b.active{background:#8b5cf6!important;border-color:#a78bfa!important;color:#fff!important}.diff-stats-bar{display:flex;gap:16px;margin-top:12px;align-items:center;flex-wrap:wrap}.diff-stat{display:flex;align-items:center;gap:8px;background:#1e293b99;border:1px solid rgba(63,80,110,.4);padding:8px 14px;border-radius:8px;font-size:12.5px}.diff-label{color:#8c9eb9;font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}.diff-value{color:#e5efff;font-weight:600}.diff-stat-warning{background:#e457571a;border-color:#e457574d}.diff-stat-warning .diff-value{color:#f8aaaa}.diff-stat-divergent{background:#8b5cf61a;border-color:#8b5cf64d}.diff-stat-divergent .diff-value{color:#c4b5fd}.diff-stat-identical{background:#10b9811a;border-color:#10b9814d}.diff-stat-identical .diff-value{color:#6ee7b7}.layer-label-node{font-size:11.5px;font-weight:800;color:#63789b;letter-spacing:.1em;text-transform:uppercase;background:transparent;pointer-events:none;white-space:nowrap}.trace-node{box-shadow:0 4px 14px #00000040!important}.trace-node-shared{opacity:.6;filter:grayscale(.5)}.trace-node-unique{box-shadow:0 0 0 2px #3b82f6,0 8px 32px #3b82f640!important;border-color:#60a5fa!important;transform:translateY(-2px);z-index:10}.trace-node-unique.trace-node-error{box-shadow:0 0 0 2px #ef4444,0 8px 32px #ef444440!important;border-color:#f87171!important}.trace-node-identical{opacity:.55;filter:grayscale(.5);box-shadow:none!important;border-color:#63789b33!important}.trace-node-changed{box-shadow:0 0 0 2px #eab308,0 8px 32px #eab30833!important;border-color:#facc15!important;transform:translateY(-1px);z-index:10}.diff-divergence-pill{font-size:10px;font-weight:800;color:#fff;background:#db2777;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 0 0 1px #ffffff1a}.diff-duration-pill{font-size:10px;font-family:var(--mono);padding:1px 4px;border-radius:4px;font-weight:600}.diff-duration-pill.slower{color:#fca5a5;background:#ef444426}.diff-duration-pill.faster{color:#6ee7b7;background:#10b98126}.trace-node-faded{opacity:.25!important;filter:grayscale(.8) blur(1px)!important;transition:all .2s ease-out}.diff-explanations{margin-top:16px;background:#0f141d80;border:1px solid rgba(255,255,255,.05);padding:12px 16px;border-radius:8px}.diff-explanation-text{color:#94a3b8;font-size:13px;line-height:1.5;margin:4px 0}.diff-explanation-text.diff-explanation-highlight{color:#eab308;font-weight:500;margin-top:8px;border-top:1px dashed rgba(255,255,255,.1);padding-top:8px}.diff-val{color:#fff;font-family:var(--mono);background:#ffffff1a;padding:2px 4px;border-radius:4px}.insight-card{background:#212e4266;border:1px solid rgba(63,80,110,.4);border-radius:8px;padding:12px 14px;margin-top:8px;font-size:13px;color:#c4d4eb;line-height:1.5}.insight-card p{margin:0;display:flex;align-items:flex-start;gap:8px}.insight-card strong{color:#fff;font-weight:600}.trace-overview .overview-actions button{font-size:13.5px}.metrics-panel{background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 24px #0006;z-index:50}.window-selector{display:flex;background:var(--surface-hover);border-radius:6px;padding:2px;border:1px solid var(--border)}.window-btn{background:transparent;border:none;color:#94a3b8;font-size:11px;font-weight:600;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .2s}.window-btn:hover{color:#fff}.window-btn.active{background:var(--border);color:#fff;box-shadow:0 1px 2px #0003}.metrics-section{background:#0f172a4d;border:1px solid var(--border);border-radius:8px;padding:16px}.metrics-section-title{color:#fff;font-size:14px;font-weight:600;margin:0 0 12px}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.metric-card{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:6px;padding:12px;display:flex;flex-direction:column}.metric-card-error{border-color:#ef44444d;background:#ef44440d}.metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;font-weight:600;margin-bottom:4px}.metric-value{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.5px}.metric-subvalue{font-size:11px;color:#64748b;margin-top:4px}.metric-card-error .metric-value{color:#fca5a5}.health-pill{font-size:11px;font-weight:600;padding:4px 8px;border-radius:4px;border:1px solid}.health-pill.success{color:#86efac;border-color:#86efac4d;background:#86efac1a}.health-pill.error{color:#fca5a5;border-color:#fca5a54d;background:#fca5a51a}.health-pill.warn{color:#fde047;border-color:#fde0474d;background:#fde0471a}