html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Helvetica Neue,Arial,sans-serif}#root{width:100%;min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2d2d2d;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Helvetica Neue,Arial,sans-serif}.app-container{max-width:1200px;min-height:100vh;margin:0 auto;padding:3rem 2rem}h1,h2,h3,h4{letter-spacing:-.02em;font-weight:600}h1{color:#1a1a1a;margin-bottom:.5rem;font-size:2.25rem}h2{color:#1a1a1a;font-size:1.75rem}h3{color:#2d2d2d;font-size:1.25rem}h4{color:#2d2d2d;font-size:1.1rem}.header{text-align:center;margin-bottom:4rem}.subtitle{color:#666;font-size:1rem;font-weight:400}.api-section{background:#fff;border:1px solid #e5e5e5;border-radius:12px;margin-bottom:3rem;padding:2rem}.api-section-title{color:#1a1a1a;margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.section-divider{color:#1a1a1a;margin-top:3rem;margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.loading-state,.empty-state{text-align:center;color:#888;padding:2rem;font-size:.95rem}.data-grid{flex-direction:column;gap:1rem;display:flex}.data-card{background:#fafafa;border:1px solid #e5e5e5;border-radius:8px;padding:1.5rem;transition:all .2s}.data-card:hover{border-color:#d0d0d0;box-shadow:0 2px 8px #0000000a}.data-card-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.data-card-title{color:#1a1a1a;font-size:.875rem;font-weight:600}.data-card-badge{color:#fff;background:#22c55e;border-radius:12px;padding:.25rem .75rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.75rem;font-weight:500}.duration-badge{background:#ef4444}.data-card-query{color:#1a1a1a;white-space:pre-wrap;word-break:break-all;background:#fff;border-radius:6px;margin-bottom:.75rem;padding:.75rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.8rem;overflow-x:auto}.data-card-plan{color:#666;white-space:pre-wrap;background:#fff;border-radius:6px;max-height:150px;margin-bottom:.75rem;padding:.75rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.75rem;overflow:auto}.data-card-stats{flex-wrap:wrap;gap:.75rem;display:flex}.stat-pill{background:#fff;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.8rem;display:flex}.stat-pill-label{color:#888;font-weight:500}.stat-pill-value{color:#1a1a1a;font-family:SF Mono,Monaco,Menlo,monospace;font-weight:600}.data-card-meta{color:#888;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.75rem;display:flex}.queries-list{flex-direction:column;gap:1rem;display:flex}.query-row{cursor:pointer;background:#fff;border:1px solid #e5e5e5;border-radius:12px;transition:all .2s;position:relative}.query-row:hover{border-color:#d0d0d0;box-shadow:0 2px 8px #0000000a}.optimization-label{text-align:right;z-index:10;position:absolute;top:1rem;right:1rem}.optimization-label-text{color:#1a1a1a;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.75rem;font-weight:600}.optimization-times{align-items:center;gap:.5rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.875rem;font-weight:500;display:flex}.time-current{color:#ef4444}.time-arrow{color:#888;font-size:.75rem}.time-optimized{color:#22c55e}.query-row-content{justify-content:space-between;align-items:center;padding:2rem;display:flex}.query-main-info h3{color:#1a1a1a;margin-bottom:.5rem;font-size:1.15rem;font-weight:500}.query-preview{color:#666;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.75rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.875rem;overflow:hidden}.query-meta-list{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.time-display{color:#ef4444;font-family:SF Mono,Monaco,Menlo,monospace;font-size:1rem;font-weight:400}.improvement-indicator{color:#22c55e;font-size:.875rem;font-weight:500}.execution-time{color:#888;font-size:.875rem;font-weight:400}.footer{text-align:center;color:#888;margin-top:4rem;font-size:.9rem}.detail-view{padding:2rem}.back-button{color:#666;cursor:pointer;background:0 0;border:none;margin-bottom:2rem;padding:.5rem 0;font-size:1rem;transition:color .2s}.back-button:hover{color:#1a1a1a}.detail-header{margin-bottom:3rem}.detail-header h2{margin-bottom:2rem}.query-stats{gap:2rem;display:flex}.stat-box{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:1.5rem 2rem}.stat-label{color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.85rem}.stat-value{font-family:SF Mono,Monaco,Menlo,monospace;font-size:1.5rem;font-weight:500}.stat-value.slow{color:#ef4444}.stat-value.optimized{color:#22c55e}.detail-content{flex-direction:column;gap:3rem;display:flex}.query-section,.optimization-section{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:2.5rem}.section-header{margin-bottom:1.5rem}.section-header h3{color:#888;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;font-weight:500}.query-container-wrapper{gap:2rem;display:flex}.query-metrics-panel{flex-direction:column;flex:0 0 280px;gap:1.5rem;display:flex}.metric-item{flex-direction:column;gap:.5rem;display:flex}.metric-label{color:#888;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.metric-value{color:#1a1a1a;font-family:SF Mono,Monaco,Menlo,monospace;font-size:1rem;font-weight:500}.metric-value-red{color:#ef4444}.metric-indexes{flex-direction:column;gap:.5rem;margin-top:.25rem;display:flex}.metric-index-tag{color:#1a1a1a;background:#f5f5f5;border-radius:4px;padding:.375rem .625rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.75rem;display:inline-block}.query-code-container{flex:1;min-height:200px;position:relative;overflow-x:auto}.code-block{background:#fff;border:1px solid #e5e5e5;border-radius:6px;padding:.5rem .75rem;overflow-x:auto}.code-block pre{white-space:pre;margin:0;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.85rem;line-height:1.6}.code-block code{font-family:inherit}.analyze-button{color:#fff;cursor:pointer;background:#1a1a1a;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;transition:all .2s;position:absolute;bottom:1rem;right:1rem;box-shadow:0 2px 8px #0000001a}.analyze-button:hover{background:#2d2d2d;box-shadow:0 4px 12px #00000026}.analysis-modal{background:#fff;border:0 solid #e5e5e5;border-radius:12px;max-height:0;margin-top:0;animation:.5s forwards slideDown;overflow:hidden}@keyframes slideDown{0%{border-width:0;max-height:0;margin-top:0}to{border-width:1px;max-height:2000px;margin-top:2rem}}.analysis-modal-content{padding:2.5rem;animation:.3s .2s both fadeInContent}@keyframes fadeInContent{0%{opacity:0}to{opacity:1}}.query-code-container pre{color:#1a1a1a;margin:0;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.875rem;line-height:1.6}.query-code-container code{font-family:inherit}.optimization-prompt{text-align:center;padding:3rem 0}.btn-primary,.btn-execute,.btn-reset,.btn-next{color:#fff;cursor:pointer;background:#1a1a1a;border:none;border-radius:8px;padding:.875rem 2rem;font-size:.95rem;font-weight:500;transition:all .2s}.btn-primary:hover,.btn-execute:hover,.btn-reset:hover,.btn-next:hover{background:#2d2d2d}.btn-cancel{color:#666;cursor:pointer;background:#fff;border:1px solid #e5e5e5;border-radius:8px;margin-left:1rem;padding:.875rem 2rem;font-size:.95rem;font-weight:500;transition:all .2s}.btn-cancel:hover{background:#fafafa;border-color:#d0d0d0}.btn-accept{color:#fff;cursor:pointer;background:#22c55e;border:none;border-radius:8px;padding:.875rem 2rem;font-size:.95rem;font-weight:500;transition:all .2s}.btn-accept:hover{background:#1ba54f}.btn-rollback{color:#ef4444;cursor:pointer;background:#fff;border:1px solid #ef4444;border-radius:8px;margin-left:1rem;padding:.875rem 2rem;font-size:.95rem;font-weight:500;transition:all .2s}.btn-rollback:hover{background:#fef2f2;border-color:#dc2626}.analyzing-state{text-align:center;padding:3rem 0}.executing-state{text-align:left;padding:2rem 0 0}.analyzing-state .spinner{margin-bottom:0}.execution-header{margin-bottom:1.5rem}.agent-indicator{color:#1a1a1a;align-items:center;gap:.75rem;font-weight:500;display:flex}.agent-dot{background:#22c55e;border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.terminal-output{color:#0f0;background:#1a1a1a;border-radius:8px;min-height:200px;max-height:400px;margin-bottom:1.5rem;padding:1.5rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.875rem;line-height:1.8;overflow-y:auto}.terminal-line{align-items:flex-start;margin-bottom:.25rem;display:flex}.terminal-prompt{color:#0f0;flex-shrink:0;margin-right:.75rem}.terminal-command{color:#fff;word-break:break-all}.terminal-cursor{color:#0f0;animation:1s step-end infinite blink}.terminal-output-line{color:#0f0;font-style:italic}.terminal-spinner{color:#0f0;flex-shrink:0;margin-right:.75rem;animation:1.5s ease-in-out infinite pulse}.terminal-status{color:#fff;opacity:.8}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.thinking-indicator{text-align:center;background:#fafafa;border:1px solid #e5e5e5;border-radius:8px;margin-bottom:1.5rem;padding:2rem}.thinking-text{color:#666;font-size:1rem;font-style:italic;display:inline-block}.thinking-dots{margin-left:.25rem;display:inline-block}.thinking-dots span{animation:1.4s infinite both thinkingBlink}.thinking-dots span:first-child{animation-delay:0s}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes thinkingBlink{0%,80%,to{opacity:.3}40%{opacity:1}}.experiments-results-section{margin:1.5rem 0}.expand-toggle-button{cursor:pointer;color:#666;text-align:left;background:0 0;border:none;align-items:center;gap:.75rem;width:100%;padding:.75rem 0;font-size:.95rem;transition:color .2s;display:flex}.expand-toggle-button:hover{color:#1a1a1a}.expand-arrow{color:#666;font-size:1.25rem;transition:transform .2s;display:inline-block}.results-grouped{border-top:1px solid #e5e5e5;margin-top:1rem;padding-top:1rem}.analyzing-state h4,.executing-state h4{margin:1.5rem 0 .75rem;font-weight:500}.analyzing-state p{color:#888;font-size:.95rem}.spinner{border:2px solid #f0f0f0;border-top-color:#1a1a1a;border-radius:50%;width:40px;height:40px;margin:0 auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.recommendation-header{margin-bottom:2rem}.recommendation-header h4{color:#1a1a1a;font-size:1rem;font-weight:600}.recommendation-content{flex-direction:column;gap:2rem;display:flex}.recommendation-text{color:#555;font-size:.95rem;line-height:1.6}.steps-list{flex-direction:column;gap:1.5rem;display:flex}.step-item{align-items:flex-start;gap:1.5rem;display:flex}.step-marker{color:#fff;background:#1a1a1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:.875rem;font-weight:600;display:flex}.step-text{flex:1}.step-text code{color:#1a1a1a;background:#f5f5f5;border-radius:6px;margin-bottom:.5rem;padding:.5rem .75rem;font-family:SF Mono,Monaco,Menlo,monospace;font-size:.85rem;display:block;overflow-x:auto}.step-text p{color:#666;font-size:.9rem;line-height:1.5}.benefits-list{background:#fafafa;border:1px solid #e5e5e5;border-radius:8px;padding:1.5rem}.benefit-header{color:#1a1a1a;margin-bottom:1rem;font-size:.95rem;font-weight:600}.benefits-list ul{margin:0;list-style:none}.benefits-list li{color:#555;margin-bottom:.75rem;padding-left:1.5rem;font-size:.9rem;line-height:1.5;position:relative}.benefits-list li:before{content:"—";color:#22c55e;font-weight:700;position:absolute;left:0}.estimated-impact{border:1px solid #e5e5e5;border-radius:8px;padding:1.5rem}.impact-header{margin-bottom:1rem;font-size:.95rem;font-weight:600}.impact-numbers{align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.before-value{color:#ef4444;font-family:SF Mono,Monaco,Menlo,monospace;font-size:1.5rem;font-weight:600}.after-value{color:#22c55e;font-family:SF Mono,Monaco,Menlo,monospace;font-size:1.5rem;font-weight:600}.arrow{color:#ccc;font-size:1.25rem}.time-saved{color:#555;font-size:.9rem}.action-buttons-container{text-align:center}.completed-state{text-align:center;padding:2rem 0}.success-indicator{margin-bottom:3rem}.check-icon{color:#fff;background:#22c55e;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 1.5rem;font-size:2rem;font-weight:600;animation:.4s scaleIn;display:flex}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.success-indicator h4{font-weight:500}.results-display{flex-direction:column;gap:1rem;max-width:500px;margin:0 auto 3rem;display:flex}.result-row{background:#fafafa;border-radius:8px;justify-content:space-between;align-items:center;padding:1rem;display:flex}.result-label{color:#888;font-size:.9rem}.result-value{font-family:SF Mono,Monaco,Menlo,monospace;font-size:1.1rem;font-weight:600}.result-before{color:#ef4444}.result-after{color:#22c55e}.result-improvement{color:#1a1a1a}@media (max-width:768px){.app-container{padding:1.5rem}h1{font-size:1.75rem}.query-row-content{flex-direction:column;align-items:flex-start;gap:1rem}.arrow{position:absolute;top:50%;right:2rem;transform:translateY(-50%)}.query-stats{flex-direction:column;gap:1rem}.query-section,.optimization-section{padding:1.5rem}.detail-content{gap:2rem}.query-container-wrapper{flex-direction:column;gap:1.5rem}.query-metrics-panel{flex-flow:wrap;flex:none;gap:1rem}.metric-item{flex:1;min-width:calc(50% - .5rem)}.metric-indexes{gap:.25rem}.metric-index-tag{font-size:.65rem}.action-buttons-container{flex-direction:column;display:flex}.btn-cancel,.btn-rollback{margin-top:.75rem;margin-left:0}.analyze-button{padding:.625rem 1.25rem;font-size:.8rem}.analysis-modal{margin-top:1.5rem}@keyframes slideDown{0%{border-width:0;max-height:0;margin-top:0}to{border-width:1px;max-height:1500px;margin-top:1.5rem}}.analysis-modal-content{padding:1.5rem}.api-section{margin-bottom:2rem;padding:1.5rem}.api-section-title{font-size:1.1rem}.data-card{padding:1rem}.data-card-query,.data-card-plan{font-size:.75rem}.data-card-stats{flex-direction:column;gap:.5rem}.stat-pill{justify-content:space-between;width:100%}}