:root{--color-bg: #09090b;--color-surface: #111113;--color-surface-raised: #18181b;--color-surface-overlay: #1e1e22;--color-surface-hover: #1c1c20;--color-border: #27272a;--color-border-subtle: #1c1c20;--color-text: #fafafa;--color-text-secondary: #d4d4d8;--color-text-muted: #a1a1aa;--color-text-faint: #71717a;--color-accent: #6366f1;--color-accent-hover: #818cf8;--color-accent-glow: rgba(99, 102, 241, .25);--color-accent-subtle: rgba(99, 102, 241, .08);--color-llm: #3b82f6;--color-llm-bg: rgba(59, 130, 246, .1);--color-llm-glow: rgba(59, 130, 246, .2);--color-tool: #22c55e;--color-tool-bg: rgba(34, 197, 94, .1);--color-tool-glow: rgba(34, 197, 94, .2);--color-decision: #a855f7;--color-decision-bg: rgba(168, 85, 247, .1);--color-decision-glow: rgba(168, 85, 247, .2);--color-error: #ef4444;--color-error-bg: rgba(239, 68, 68, .1);--color-error-glow: rgba(239, 68, 68, .2);--color-custom: #71717a;--color-custom-bg: rgba(113, 113, 122, .1);--color-custom-glow: rgba(113, 113, 122, .15);--glass-bg: rgba(17, 17, 19, .8);--glass-border: rgba(255, 255, 255, .06);--glass-blur: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 13px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--line-height: 1.5;--line-height-tight: 1.3;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 2px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-overlay: 0 16px 48px rgba(0, 0, 0, .6);--shadow-glow: 0 0 20px rgba(99, 102, 241, .15);--transition-fast: .12s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--transition-theme: .4s ease;--header-height: 52px;--footer-height: 48px;--sidebar-width: 260px;--inspector-width: 380px;--resize-handle-width: 4px}[data-theme=light]{--color-bg: #fafafa;--color-surface: #ffffff;--color-surface-raised: #f4f4f5;--color-surface-overlay: #e4e4e7;--color-surface-hover: #f0f0f2;--color-border: #d4d4d8;--color-border-subtle: #e4e4e7;--color-text: #09090b;--color-text-secondary: #27272a;--color-text-muted: #52525b;--color-text-faint: #a1a1aa;--color-llm-bg: rgba(59, 130, 246, .07);--color-tool-bg: rgba(34, 197, 94, .07);--color-decision-bg: rgba(168, 85, 247, .07);--color-error-bg: rgba(239, 68, 68, .07);--color-custom-bg: rgba(113, 113, 122, .07);--color-accent-glow: rgba(99, 102, 241, .15);--color-llm-glow: rgba(59, 130, 246, .1);--color-tool-glow: rgba(34, 197, 94, .1);--color-decision-glow: rgba(168, 85, 247, .1);--color-error-glow: rgba(239, 68, 68, .1);--glass-bg: rgba(255, 255, 255, .8);--glass-border: rgba(0, 0, 0, .06);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--shadow-overlay: 0 16px 48px rgba(0, 0, 0, .15);--shadow-glow: 0 0 20px rgba(99, 102, 241, .08)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background:var(--color-bg);overflow:hidden;height:100vh}*,*:before,*:after{transition-property:background-color,border-color,color,box-shadow;transition-duration:0ms;transition-timing-function:ease}html.theme-transitioning *,html.theme-transitioning *:before,html.theme-transitioning *:after{transition-duration:var(--transition-theme)!important}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}input{font:inherit;color:inherit;border:none;background:none;outline:none}kbd{display:inline-flex;align-items:center;padding:1px 6px;font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:500;line-height:1.6;color:var(--color-text-faint);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--color-border)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-faint)}*{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}.timeline-container,.inspector-content,.trace-list{scroll-behavior:smooth}#app{display:flex;flex-direction:column;height:100vh;animation:app-fade-in .5s ease both}@keyframes app-fade-in{0%{opacity:0}to{opacity:1}}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--space-5);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);flex-shrink:0;z-index:10;position:relative}.app-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent-glow),transparent);opacity:.5}.header-left{display:flex;align-items:center;gap:var(--space-3)}.logo{font-size:var(--font-size-md);font-weight:700;letter-spacing:-.02em;color:var(--color-text);background:linear-gradient(135deg,var(--color-text),var(--color-accent-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-separator{width:1px;height:16px;background:var(--color-border)}.header-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:400}.header-actions{display:flex;align-items:center;gap:var(--space-1)}.header-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);height:32px;border-radius:var(--radius-md);color:var(--color-text-muted);transition:all var(--transition-fast);font-size:var(--font-size-sm);position:relative}.header-btn:hover{background:var(--color-surface-raised);color:var(--color-text)}.header-btn:active{transform:scale(.97)}.search-hint{color:var(--color-text-faint)}.app-main{display:flex;flex:1;overflow:hidden;min-height:0}.sidebar{display:flex;flex-direction:column;width:var(--sidebar-width);min-width:180px;max-width:400px;background:var(--color-surface);border-right:1px solid var(--color-border);overflow:hidden;flex-shrink:0;animation:slide-in-left .4s ease both}@keyframes slide-in-left{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);flex-shrink:0}.sidebar-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.sidebar-search{padding:0 var(--space-3) var(--space-3);flex-shrink:0}.sidebar-search-input{width:100%;padding:var(--space-2) var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);transition:all var(--transition-fast)}.sidebar-search-input::placeholder{color:var(--color-text-faint)}.sidebar-search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow);background:var(--color-surface)}.trace-list{flex:1;overflow-y:auto;padding:0 var(--space-2) var(--space-2)}.trace-item{display:flex;flex-direction:column;gap:2px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-bottom:2px;border:1px solid transparent}.trace-item:hover{background:var(--color-surface-raised);border-color:var(--color-border-subtle)}.trace-item[aria-selected=true]{background:linear-gradient(135deg,var(--color-accent),#818cf8);color:#fff;border-color:transparent;box-shadow:0 2px 8px var(--color-accent-glow)}.trace-item[aria-selected=true] .trace-item-meta{color:#ffffffb3}.trace-item-name{font-size:var(--font-size-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-item-meta{font-size:var(--font-size-xs);color:var(--color-text-faint);display:flex;gap:var(--space-3)}.timeline-panel{display:flex;flex-direction:column;overflow:hidden;background:var(--color-bg);flex:1;min-width:0;animation:fade-in-up .4s ease .1s both}@keyframes fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.timeline-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border);flex-shrink:0;background:var(--color-surface)}.panel-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.timeline-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--font-size-xs);color:var(--color-text-faint)}.timeline-meta-item{display:flex;align-items:center;gap:var(--space-1)}.timeline-container{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5)}.inspector-panel{display:flex;flex-direction:column;width:var(--inspector-width);min-width:260px;max-width:600px;background:var(--color-surface);border-left:1px solid var(--color-border);overflow:hidden;flex-shrink:0;animation:slide-in-right .4s ease .2s both}@keyframes slide-in-right{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.inspector-header{display:flex;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);flex-shrink:0}.inspector-content{flex:1;overflow-y:auto;padding:var(--space-4)}.inspector-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-3);text-align:center;padding:var(--space-8)}.inspector-empty-icon{width:64px;height:64px;color:var(--color-text-faint);opacity:.3;margin-bottom:var(--space-2)}.inspector-empty-text{font-size:var(--font-size-md);color:var(--color-text-muted);font-weight:500}.inspector-empty-hint{font-size:var(--font-size-xs);color:var(--color-text-faint)}.resize-handle{width:var(--resize-handle-width);cursor:col-resize;background:transparent;position:relative;flex-shrink:0;z-index:5;transition:background var(--transition-fast)}.resize-handle:hover,.resize-handle.active{background:var(--color-accent)}.resize-handle:before{content:"";position:absolute;top:0;bottom:0;left:-3px;right:-3px}.cost-footer{display:flex;align-items:center;height:var(--footer-height);padding:0 var(--space-5);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border);flex-shrink:0;gap:var(--space-5);font-size:var(--font-size-sm);overflow-x:auto;position:relative}.cost-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent-glow),transparent);opacity:.3}.cost-stat{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}.cost-stat-label{color:var(--color-text-faint);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em}.cost-stat-value{color:var(--color-text);font-weight:600;font-variant-numeric:tabular-nums}.cost-stat-separator{width:1px;height:20px;background:var(--color-border)}.cost-model-breakdown{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}.cost-model-item{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);color:var(--color-text-muted)}.cost-model-dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent)}.search-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding-top:18vh;z-index:100;animation:overlay-in .2s ease}.search-overlay[hidden]{display:none}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.search-modal{width:560px;max-width:calc(100vw - 32px);background:var(--color-surface);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-overlay),0 0 80px #6366f114;overflow:hidden;animation:modal-in .2s ease}@keyframes modal-in{0%{opacity:0;transform:scale(.96) translateY(-12px)}to{opacity:1;transform:scale(1) translateY(0)}}.search-modal-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text-muted)}.search-modal-input{flex:1;font-size:var(--font-size-md);color:var(--color-text)}.search-modal-input::placeholder{color:var(--color-text-faint)}.search-modal-esc{flex-shrink:0}.search-modal-results{max-height:320px;overflow-y:auto;padding:var(--space-2)}.search-result-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.search-result-item:hover,.search-result-item[data-active=true]{background:var(--color-surface-raised)}.search-result-badge{font-size:var(--font-size-xs);padding:2px 8px;border-radius:9px;font-weight:600;flex-shrink:0}.search-result-name{font-size:var(--font-size-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-result-model{font-size:var(--font-size-xs);color:var(--color-text-faint);margin-left:auto;flex-shrink:0}.search-empty{padding:var(--space-8) var(--space-4);text-align:center;color:var(--color-text-faint);font-size:var(--font-size-sm)}.tooltip{position:fixed;z-index:1000;padding:var(--space-2) var(--space-3);background:var(--color-surface-overlay);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-xs);color:var(--color-text-secondary);box-shadow:var(--shadow-lg);pointer-events:none;white-space:nowrap;animation:tooltip-in .15s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}@keyframes tooltip-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tooltip-row{display:flex;gap:var(--space-3);padding:1px 0}.tooltip-label{color:var(--color-text-faint)}.tooltip-value{font-weight:600;font-variant-numeric:tabular-nums}.context-menu{position:fixed;z-index:200;min-width:180px;padding:var(--space-1);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);animation:context-menu-in .12s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}@keyframes context-menu-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.context-menu-item:hover{background:var(--color-accent);color:#fff}.context-menu-item-icon{width:14px;height:14px;opacity:.6}.context-menu-separator{height:1px;background:var(--color-border);margin:var(--space-1) 0}@media(max-width:900px){.inspector-panel{display:none}.inspector-panel.mobile-active{display:flex;position:fixed;left:0;right:0;bottom:var(--footer-height);top:auto;height:45vh;width:100%;z-index:50;border-left:none;border-top:1px solid var(--color-border);animation:slide-up .3s ease}.resize-handle-inspector{display:none}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(max-width:768px){.app-main{flex-direction:column}.sidebar{width:100%!important;max-width:none;max-height:180px;border-right:none;border-bottom:1px solid var(--color-border)}.resize-handle-sidebar,.header-btn kbd,.search-hint{display:none}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-md)}@media print{.app-header,.cost-footer,.sidebar,.inspector-panel,.resize-handle,#minimap-container{display:none!important}.app-main{display:block!important}.timeline-panel,.timeline-container{overflow:visible!important;height:auto!important}body{overflow:visible!important;height:auto!important;background:#fff!important;color:#000!important}.step-card{break-inside:avoid;border:1px solid #ccc!important;box-shadow:none!important}}.timeline-container{position:relative}.timeline-container:before{content:"";position:absolute;top:var(--space-4);bottom:var(--space-4);left:calc(var(--space-5) + 11px);width:1px;background:linear-gradient(180deg,var(--color-border),var(--color-border-subtle),transparent);pointer-events:none}.step-card{position:relative;display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border-subtle);border-left:3px solid var(--color-custom);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-base),transform var(--transition-fast);outline:none;animation:step-fade-in .3s ease both}.step-card:nth-child(1){animation-delay:20ms}.step-card:nth-child(2){animation-delay:40ms}.step-card:nth-child(3){animation-delay:60ms}.step-card:nth-child(4){animation-delay:80ms}.step-card:nth-child(5){animation-delay:.1s}.step-card:nth-child(6){animation-delay:.12s}.step-card:nth-child(7){animation-delay:.14s}.step-card:nth-child(8){animation-delay:.16s}.step-card:nth-child(9){animation-delay:.18s}.step-card:nth-child(10){animation-delay:.2s}@keyframes step-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.step-card:hover{background:var(--color-surface-raised);border-color:var(--color-border);transform:translate(2px);box-shadow:var(--shadow-sm)}.step-card:focus-visible{box-shadow:0 0 0 2px var(--color-accent)}.step-card[aria-selected=true]{background:var(--color-surface-raised);border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),0 0 16px var(--color-accent-glow),var(--shadow-md);transform:translate(2px)}.step-card[data-type=llm_call]{border-left-color:var(--color-llm)}.step-card[data-type=llm_call]:hover,.step-card[data-type=llm_call][aria-selected=true]{box-shadow:0 0 0 1px var(--color-llm),0 0 16px var(--color-llm-glow),var(--shadow-md)}.step-card[data-type=tool_call],.step-card[data-type=tool_result]{border-left-color:var(--color-tool)}.step-card[data-type=tool_call]:hover,.step-card[data-type=tool_call][aria-selected=true],.step-card[data-type=tool_result]:hover,.step-card[data-type=tool_result][aria-selected=true]{box-shadow:0 0 0 1px var(--color-tool),0 0 16px var(--color-tool-glow),var(--shadow-md)}.step-card[data-type=decision]{border-left-color:var(--color-decision)}.step-card[data-type=decision]:hover,.step-card[data-type=decision][aria-selected=true]{box-shadow:0 0 0 1px var(--color-decision),0 0 16px var(--color-decision-glow),var(--shadow-md)}.step-card[data-type=error]{border-left-color:var(--color-error)}.step-card[data-type=error]:hover,.step-card[data-type=error][aria-selected=true]{box-shadow:0 0 0 1px var(--color-error),0 0 16px var(--color-error-glow),var(--shadow-md)}.step-card[data-type=custom]{border-left-color:var(--color-custom)}.step-dot{position:relative;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--color-custom);flex-shrink:0;z-index:1;transition:all var(--transition-fast)}.step-card:hover .step-dot{transform:scale(1.3)}.step-card[aria-selected=true] .step-dot{transform:scale(1.5);box-shadow:0 0 8px currentColor}.step-card[data-type=llm_call] .step-dot{background:var(--color-llm)}.step-card[data-type=tool_call] .step-dot,.step-card[data-type=tool_result] .step-dot{background:var(--color-tool)}.step-card[data-type=decision] .step-dot{background:var(--color-decision)}.step-card[data-type=error] .step-dot{background:var(--color-error)}.step-card[data-depth="1"]{margin-left:20px}.step-card[data-depth="2"]{margin-left:40px}.step-card[data-depth="3"]{margin-left:60px}.step-card[data-depth="4"]{margin-left:80px}.step-card[data-depth="5"]{margin-left:100px}.step-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}.step-header{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.step-name{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-badge{display:inline-flex;align-items:center;padding:0 8px;height:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:10px;flex-shrink:0;transition:all var(--transition-fast)}.step-badge--llm_call{color:var(--color-llm);background:var(--color-llm-bg);border:1px solid rgba(59,130,246,.15)}.step-badge--tool_call,.step-badge--tool_result{color:var(--color-tool);background:var(--color-tool-bg);border:1px solid rgba(34,197,94,.15)}.step-badge--decision{color:var(--color-decision);background:var(--color-decision-bg);border:1px solid rgba(168,85,247,.15)}.step-badge--error{color:var(--color-error);background:var(--color-error-bg);border:1px solid rgba(239,68,68,.15)}.step-badge--custom{color:var(--color-custom);background:var(--color-custom-bg);border:1px solid rgba(113,113,122,.15)}.step-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-faint)}.step-meta-item{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.step-meta-icon{width:12px;height:12px;opacity:.6}.step-duration-bar{height:2px;background:var(--color-border);border-radius:1px;margin-top:var(--space-1);overflow:hidden}.step-duration-fill{height:100%;border-radius:1px;transition:width .6s cubic-bezier(.16,1,.3,1)}.step-card[data-type=llm_call] .step-duration-fill{background:linear-gradient(90deg,var(--color-llm),#60a5fa)}.step-card[data-type=tool_call] .step-duration-fill,.step-card[data-type=tool_result] .step-duration-fill{background:linear-gradient(90deg,var(--color-tool),#86efac)}.step-card[data-type=decision] .step-duration-fill{background:linear-gradient(90deg,var(--color-decision),#c084fc)}.step-card[data-type=error] .step-duration-fill{background:linear-gradient(90deg,var(--color-error),#fca5a5)}.step-card[data-type=custom] .step-duration-fill{background:linear-gradient(90deg,var(--color-custom),#a1a1aa)}.step-model{font-size:var(--font-size-xs);color:var(--color-text-faint);font-family:var(--font-mono);margin-left:auto;flex-shrink:0;padding:0 4px;background:var(--color-surface-overlay);border-radius:var(--radius-sm)}.step-error-indicator{display:inline-flex;align-items:center;gap:3px;color:var(--color-error);font-size:var(--font-size-xs);font-weight:600;padding:0 6px;background:var(--color-error-bg);border-radius:9px;border:1px solid rgba(239,68,68,.15)}.step-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-sm);color:var(--color-text-faint);transition:all var(--transition-fast);flex-shrink:0}.step-toggle:hover{background:var(--color-surface-overlay);color:var(--color-text)}.step-toggle svg{transition:transform var(--transition-base)}.step-toggle[aria-expanded=true] svg{transform:rotate(90deg)}.step-children{overflow:hidden;transition:max-height var(--transition-slow)}.step-children[aria-hidden=true]{max-height:0}.timeline-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-4);color:var(--color-text-faint);text-align:center;padding:var(--space-10)}.timeline-empty-icon{width:64px;height:64px;opacity:.2;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.timeline-empty p{font-size:var(--font-size-md);font-weight:500}.timeline-empty .empty-hint{font-size:var(--font-size-sm);color:var(--color-text-faint);opacity:.7}.inspector-section{margin-bottom:var(--space-5);animation:inspector-section-in .3s ease both}.inspector-section:nth-child(1){animation-delay:50ms}.inspector-section:nth-child(2){animation-delay:.1s}.inspector-section:nth-child(3){animation-delay:.15s}.inspector-section:nth-child(4){animation-delay:.2s}.inspector-section:nth-child(5){animation-delay:.25s}@keyframes inspector-section-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.inspector-section-header{display:flex;align-items:center;gap:var(--space-2);padding-bottom:var(--space-2);margin-bottom:var(--space-3);border-bottom:1px solid var(--color-border-subtle);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.inspector-section-icon{width:14px;height:14px;opacity:.6}.inspector-meta-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-4);font-size:var(--font-size-sm)}.inspector-meta-label{color:var(--color-text-faint);font-size:var(--font-size-xs);white-space:nowrap;padding-top:1px}.inspector-meta-value{color:var(--color-text);font-weight:500;word-break:break-all}.inspector-meta-value--mono{font-family:var(--font-mono);font-size:var(--font-size-xs);padding:1px 6px;background:var(--color-bg);border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle)}.inspector-type-badge{display:inline-flex;align-items:center;padding:2px 10px;font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:10px}.inspector-type-badge--llm_call{color:var(--color-llm);background:var(--color-llm-bg);border:1px solid rgba(59,130,246,.15)}.inspector-type-badge--tool_call,.inspector-type-badge--tool_result{color:var(--color-tool);background:var(--color-tool-bg);border:1px solid rgba(34,197,94,.15)}.inspector-type-badge--decision{color:var(--color-decision);background:var(--color-decision-bg);border:1px solid rgba(168,85,247,.15)}.inspector-type-badge--error{color:var(--color-error);background:var(--color-error-bg);border:1px solid rgba(239,68,68,.15)}.inspector-type-badge--custom{color:var(--color-custom);background:var(--color-custom-bg);border:1px solid rgba(113,113,122,.15)}.inspector-json{background:var(--color-bg);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-3);overflow-x:auto;font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:1.6;max-height:300px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;transition:max-height var(--transition-slow)}.json-key{color:#c084fc}.json-string{color:#4ade80}.json-number{color:#60a5fa}.json-boolean{color:#fb923c}.json-null{color:#f87171;font-style:italic}.json-bracket,.json-punctuation{color:var(--color-text-faint)}[data-theme=light] .json-key{color:#7c3aed}[data-theme=light] .json-string{color:#16a34a}[data-theme=light] .json-number{color:#2563eb}[data-theme=light] .json-boolean{color:#ea580c}[data-theme=light] .json-null{color:#dc2626}.inspector-error{background:var(--color-error-bg);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-lg);padding:var(--space-3);margin-top:var(--space-2)}.inspector-error-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:600;color:var(--color-error);margin-bottom:var(--space-2)}.inspector-error-message{font-size:var(--font-size-sm);color:var(--color-text);margin-bottom:var(--space-2)}.inspector-error-stack{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:pre-wrap;word-break:break-word;line-height:1.6;max-height:200px;overflow-y:auto;background:#0003;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md)}.inspector-error-code{display:inline-flex;font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-error);background:#ef44441a;padding:0 var(--space-2);border-radius:var(--radius-sm)}.inspector-tokens{display:flex;gap:var(--space-3);margin-top:var(--space-2)}.inspector-token-stat{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);transition:all var(--transition-fast)}.inspector-token-stat:hover{border-color:var(--color-border);background:var(--color-surface-raised)}.inspector-token-value{font-size:var(--font-size-lg);font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text)}.inspector-token-label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-faint);font-weight:500}.inspector-collapse-btn{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) 0;font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border-subtle);margin-bottom:var(--space-3);cursor:pointer;transition:color var(--transition-fast)}.inspector-collapse-btn:hover{color:var(--color-text)}.inspector-collapse-icon{width:12px;height:12px;transition:transform var(--transition-base)}.inspector-collapse-btn[aria-expanded=true] .inspector-collapse-icon{transform:rotate(90deg)}.diff-view{padding:var(--space-4)}.diff-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}.diff-stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);transition:border-color var(--transition-fast)}.diff-stat:hover{border-color:var(--color-border)}.diff-stat-value{font-size:var(--font-size-lg);font-weight:700;font-variant-numeric:tabular-nums}.diff-stat-value--positive{color:var(--color-tool)}.diff-stat-value--negative{color:var(--color-error)}.diff-stat-value--neutral{color:var(--color-text-muted)}.diff-stat-label{font-size:var(--font-size-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.04em}.diff-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border-subtle)}.diff-step{padding:var(--space-2) var(--space-3);margin-bottom:var(--space-1);border-radius:var(--radius-md);font-size:var(--font-size-sm)}.diff-step--added{background:#22c55e0f;border-left:3px solid var(--color-tool)}.diff-step--removed{background:#ef44440f;border-left:3px solid var(--color-error);text-decoration:line-through;opacity:.7}.diff-step--modified{background:#fbbf240f;border-left:3px solid #fbbf24}.diff-step-changes{font-size:var(--font-size-xs);color:var(--color-text-faint);margin-top:2px}.cost-breakdown-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}.cost-breakdown-table th{text-align:left;padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-faint);border-bottom:1px solid var(--color-border)}.cost-breakdown-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border-subtle);font-variant-numeric:tabular-nums}.cost-breakdown-table tr:last-child td{border-bottom:none}.cost-breakdown-table tr:hover td{background:var(--color-surface-raised)}.cost-token-bar{height:4px;background:var(--color-border);border-radius:2px;overflow:hidden;min-width:60px}.cost-token-bar-fill{height:100%;background:var(--color-accent);border-radius:2px;transition:width .6s cubic-bezier(.16,1,.3,1)}.drop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#09090bd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:200;animation:overlay-in .2s ease}.drop-overlay[hidden]{display:none}.drop-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);color:var(--color-text-muted);padding:var(--space-10) 60px;border:2px dashed var(--color-accent);border-radius:var(--radius-2xl);background:var(--color-surface);animation:drop-pulse 2s ease-in-out infinite;box-shadow:0 0 40px var(--color-accent-glow)}@keyframes drop-pulse{0%,to{border-color:var(--color-accent);box-shadow:0 0 40px var(--color-accent-glow)}50%{border-color:var(--color-accent-hover);box-shadow:0 0 60px var(--color-accent-glow)}}.drop-overlay-content svg{color:var(--color-accent);opacity:.8;animation:float 2s ease-in-out infinite}.drop-overlay-content p{font-size:var(--font-size-lg);font-weight:500}#file-upload-btn:active{transform:scale(.97)}.keyboard-hints{display:flex;align-items:center;gap:var(--space-3);margin-left:auto;font-size:var(--font-size-xs);color:var(--color-text-faint)}.keyboard-hints kbd{margin:0 2px}.view-tabs{display:flex;gap:2px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2px}.view-tab{font-size:var(--font-size-xs);font-weight:500;padding:4px 12px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.view-tab:hover{color:var(--color-text);background:var(--color-surface-hover)}.view-tab.active{color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow-sm)}.flame-graph{font-family:var(--font-mono, monospace)}.flame-bar{transition:opacity var(--transition-fast),transform var(--transition-fast)!important}.flame-bar:hover{opacity:1!important;transform:scaleY(1.1);z-index:1}@keyframes skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.skeleton{background:var(--color-surface-raised);border-radius:var(--radius-md);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-shimmer{background:linear-gradient(90deg,var(--color-surface-raised) 0%,var(--color-surface-overlay) 40%,var(--color-surface-raised) 80%);background-size:200% 100%;border-radius:var(--radius-md);animation:shimmer 1.5s ease-in-out infinite}.skeleton-step{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg)}.skeleton-dot{width:8px;height:8px;margin-top:5px;border-radius:50%;flex-shrink:0}.skeleton-content{flex:1;display:flex;flex-direction:column;gap:var(--space-2)}.skeleton-line{height:10px;border-radius:var(--radius-sm)}.skeleton-line-short{width:40%}.skeleton-line-medium{width:65%}.skeleton-line-long{width:85%}@media(max-width:768px){.view-tabs{flex-wrap:wrap}#minimap-container{display:none}.header-actions span:not(.search-hint){display:none}}@media(max-width:480px){.header-actions{gap:var(--space-1)!important}.header-btn span,.header-btn kbd{display:none}}.heatmap-row{transition:background var(--transition-fast),transform var(--transition-fast)!important}.heatmap-row:hover{background:var(--color-surface-hover)!important;transform:translate(2px)}