@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#08080d;--bg-secondary:#0e0e16;--bg-panel:#13131e;--bg-card:#ffffff06;--bg-card-hover:#ffffff0a;--border:#ffffff0f;--border-active:#d4883a4d;--accent:#d4883a;--accent-glow:#d4883a59;--accent-dim:#d4883a1f;--accent-text:#e8a558;--text-primary:#e4e2df;--text-secondary:#8a8a8a;--text-muted:#555;--success:#3dd68c;--success-bg:#3dd68c1a;--warning:#f0a050;--warning-bg:#f0a0501a;--error:#ef5350;--error-bg:#ef53501a;--info:#5c9cff;--info-bg:#5c9cff1a;--guardrail-input:#7c8cf5;--guardrail-state:#3dd6b5;--guardrail-scope:#a67cff;--guardrail-exec:#5cb8ff;--guardrail-output:#ef7070;--guardrail-interrupt:#ffb347;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;--font-sans:"Inter", -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary);height:100%;color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.5;overflow:hidden}#app{grid-template-rows:auto 1fr;gap:0;height:100vh;display:grid}.connection-bar{background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:10;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;display:flex;overflow-x:auto}.connection-bar__logo{color:var(--accent-text);white-space:nowrap;letter-spacing:-.3px;font-size:15px;font-weight:700}.connection-bar__input{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);max-width:360px;color:var(--text-primary);font-family:var(--font-mono);outline:none;flex:1;padding:8px 14px;font-size:13px;transition:border-color .2s}.connection-bar__input:focus{border-color:var(--accent)}.connection-bar__input::placeholder{color:var(--text-muted)}.connection-bar__btn{border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;letter-spacing:.2px;border:none;padding:8px 20px;font-size:13px;font-weight:600;transition:all .2s}.connection-bar__btn--connect{background:var(--accent);color:#fff}.connection-bar__btn--connect:hover:not(:disabled){box-shadow:0 0 20px var(--accent-glow);background:#e09545}.connection-bar__btn--disconnect{background:var(--error-bg);color:var(--error);border:1px solid #ef535033}.connection-bar__btn--disconnect:hover:not(:disabled){background:#ef535033}.connection-bar__btn:disabled{opacity:.4;cursor:not-allowed}.connection-bar__status{color:var(--text-secondary);align-items:center;gap:8px;margin-left:auto;font-size:12px;display:flex}.connection-bar__dot{background:var(--text-muted);border-radius:50%;width:8px;height:8px;transition:background .3s}.connection-bar__dot--connected{background:var(--success);box-shadow:0 0 8px #3dd68c80}.connection-bar__dot--connecting{background:var(--warning);animation:1s infinite pulse-dot}.connection-bar__dot--error{background:var(--error)}.connection-bar__state-badge{background:var(--accent-dim);color:var(--accent-text);border-radius:var(--radius-sm);font-size:10px;font-weight:600;font-family:var(--font-mono);letter-spacing:.3px;white-space:nowrap;flex-shrink:0;padding:3px 10px}.panels{background:var(--border);grid-template-rows:1fr 1fr;grid-template-columns:1fr 280px;gap:1px;display:grid;overflow:hidden}.panel{background:var(--bg-panel);flex-direction:column;display:flex;overflow:hidden}.panel__header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:12px 16px;display:flex}.panel__title{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-size:11px;font-weight:600}.panel__content{flex:1;padding:16px;overflow-y:auto}.panel__content::-webkit-scrollbar{width:4px}.panel__content::-webkit-scrollbar-track{background:0 0}.panel__content::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.panel--state-machine{grid-row:1/3}.state-flow{flex-direction:column;justify-content:center;gap:4px;height:100%;padding:8px;display:flex}.state-node{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:10px;padding:10px 14px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.state-node__indicator{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:10px;height:10px;transition:all .4s}.state-node__label{font-size:12px;font-weight:500;font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:.3px;transition:color .3s}.state-node__arrow{color:var(--text-muted);opacity:0;margin-left:auto;font-size:10px;transition:opacity .3s}.state-node--active{background:var(--accent-dim);border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow), inset 0 0 20px #d4883a0d}.state-node--active .state-node__indicator{background:var(--accent);box-shadow:0 0 10px var(--accent-glow);animation:2s infinite pulse-node}.state-node--active .state-node__label{color:var(--accent-text);font-weight:600}.state-node--active .state-node__arrow{opacity:1;color:var(--accent-text)}.state-node--completed{background:#d4883a0a;border-color:#d4883a26}.state-node--completed .state-node__indicator{background:#d4883a66}.state-node--completed .state-node__label{color:#d4883a99}.state-connector{background:var(--border);width:1px;height:4px;margin-left:19px;transition:background .4s}.state-connector--active{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}.state-connector--completed{background:#d4883a4d}.guardrail-stack{flex-direction:column;gap:8px;display:flex}.guardrail-badge{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:10px;padding:10px 12px;transition:all .4s;display:flex;overflow:hidden}.guardrail-badge__icon{border-radius:50%;flex-shrink:0;width:8px;height:8px;transition:all .3s}.guardrail-badge__name{color:var(--text-secondary);white-space:nowrap;flex-shrink:0;font-size:11px;font-weight:600}.guardrail-badge__reason{color:var(--text-muted);text-align:right;opacity:0;white-space:nowrap;text-overflow:ellipsis;max-width:120px;margin-left:auto;font-size:10px;transition:opacity .3s;overflow:hidden}.guardrail-badge--triggered{animation:.6s ease-out guardrail-flash}.guardrail-badge--triggered .guardrail-badge__reason{opacity:1}.guardrail-badge--blocked .guardrail-badge__icon{box-shadow:0 0 8px}.guardrail-badge[data-layer=Input\ Classification] .guardrail-badge__icon{background:var(--guardrail-input)}.guardrail-badge[data-layer=State\ Gate] .guardrail-badge__icon{background:var(--guardrail-state)}.guardrail-badge[data-layer=Tool\ Scope] .guardrail-badge__icon{background:var(--guardrail-scope)}.guardrail-badge[data-layer=Tool\ Execution] .guardrail-badge__icon{background:var(--guardrail-exec)}.guardrail-badge[data-layer=Output\ Validation] .guardrail-badge__icon{background:var(--guardrail-output)}.guardrail-badge[data-layer=Interruption\ Handler] .guardrail-badge__icon{background:var(--guardrail-interrupt)}.guardrail-badge--triggered[data-layer=Input\ Classification]{border-color:var(--guardrail-input);background:#7c8cf50f}.guardrail-badge--triggered[data-layer=State\ Gate]{border-color:var(--guardrail-state);background:#3dd6b50f}.guardrail-badge--triggered[data-layer=Tool\ Scope]{border-color:var(--guardrail-scope);background:#a67cff0f}.guardrail-badge--triggered[data-layer=Tool\ Execution]{border-color:var(--guardrail-exec);background:#5cb8ff0f}.guardrail-badge--triggered[data-layer=Output\ Validation]{border-color:var(--guardrail-output);background:#ef70700f}.guardrail-badge--triggered[data-layer=Interruption\ Handler]{border-color:var(--guardrail-interrupt);background:#ffb3470f}.tool-feed{flex-direction:column;gap:8px;display:flex}.tool-entry{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;animation:.3s ease-out slide-in}.tool-entry__header{align-items:center;gap:8px;margin-bottom:6px;display:flex}.tool-entry__name{font-size:11px;font-weight:600;font-family:var(--font-mono);background:var(--accent-dim);color:var(--accent-text);border-radius:var(--radius-sm);padding:2px 8px}.tool-entry__latency{color:var(--text-muted);font-size:10px;font-family:var(--font-mono);margin-left:auto}.tool-entry__args,.tool-entry__result{font-size:11px;font-family:var(--font-mono);color:var(--text-secondary);word-break:break-all;padding:4px 0;line-height:1.4}.tool-entry__result{color:var(--success)}.tool-entry__label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:2px;font-size:9px}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}@keyframes pulse-node{0%,to{box-shadow:0 0 6px var(--accent-glow)}50%{box-shadow:0 0 14px var(--accent-glow)}}@keyframes guardrail-flash{0%{transform:scale(1)}20%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes slide-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}