pg_insights 0.3.1 → 0.4.0

data/app/assets/stylesheets/pg_insights/analysis.css

@@ -0,0 +1,2628 @@
+/* ===========================================
+   QUERY ANALYSIS STYLES - CONFLICT-FREE
+   =========================================== */
+
+/* Ensure analysis view content is visible */
+#plan-view, #perf-view, #visual-view {
+  width: 100%;
+  min-height: 200px;
+  background: white;
+  overflow-y: auto;
+}
+
+/* ===========================================
+   SHARED ANALYSIS DASHBOARD STYLES
+   =========================================== */
+.analysis-dashboard {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.4;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.analysis-header {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 12px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.metrics-section {
+  margin-bottom: 20px;
+}
+
+.metrics-section:last-child {
+  margin-bottom: 0;
+}
+
+/* ===========================================
+   PLAN VIEW SPECIFIC STYLES
+   =========================================== */
+
+/* Metric Chips */
+.metric-chips {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.chip.primary {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.chip.success {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.chip.info {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.chip-label {
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+.chip-value {
+  font-weight: 600;
+}
+
+.execution-summary {
+  margin-top: 8px;
+}
+
+.summary-text {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+}
+
+/* Plan Visualization */
+.plan-visualization {
+  background: #f8fafc;
+  border-radius: 6px;
+  padding: 16px;
+}
+
+.plan-flow {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+
+.plan-nodes-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.plan-node-compact {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.flow-connector {
+  color: #9ca3af;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 20px;
+  min-width: 20px;
+  margin-top: 2px;
+}
+
+.node-content {
+  flex: 1;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 10px 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.node-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.node-icon {
+  font-size: 14px;
+}
+
+.node-title {
+  font-weight: 600;
+  color: #1f2937;
+  flex: 1;
+}
+
+.node-metrics {
+  font-size: 11px;
+  color: #6b7280;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.node-details-compact {
+  font-size: 10px;
+  color: #9ca3af;
+  font-style: italic;
+  line-height: 1.3;
+}
+
+/* Node Type Colors */
+.node-scan-seq .node-content {
+  border-left: 3px solid #ef4444;
+}
+
+.node-scan-index .node-content {
+  border-left: 3px solid #22c55e;
+}
+
+.node-join .node-content {
+  border-left: 3px solid #3b82f6;
+}
+
+.node-sort .node-content {
+  border-left: 3px solid #8b5cf6;
+}
+
+.node-aggregate .node-content {
+  border-left: 3px solid #f59e0b;
+}
+
+.node-limit .node-content {
+  border-left: 3px solid #06b6d4;
+}
+
+.node-other .node-content {
+  border-left: 3px solid #6b7280;
+}
+
+/* Empty States */
+.analysis-empty {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6b7280;
+}
+
+.empty-icon {
+  font-size: 32px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.empty-message {
+  font-size: 14px;
+  color: #9ca3af;
+}
+
+.plan-parse-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  color: #dc2626;
+  font-size: 13px;
+}
+
+.error-indicator {
+  font-size: 16px;
+}
+
+/* ===========================================
+   PERF VIEW SPECIFIC STYLES
+   =========================================== */
+
+/* Timing Breakdown */
+.timing-breakdown {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 14px;
+}
+
+.timing-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+  padding: 6px 0;
+}
+
+.timing-item:last-of-type {
+  margin-bottom: 0;
+}
+
+.timing-label {
+  font-weight: 500;
+  color: #374151;
+  min-width: 80px;
+  font-size: 12px;
+}
+
+.timing-bar-container {
+  flex: 1;
+  height: 6px;
+  background: #f3f4f6;
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+}
+
+.timing-bar {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.8s ease;
+}
+
+.planning-bar {
+  background: linear-gradient(90deg, #f59e0b, #d97706);
+}
+
+.execution-bar {
+  background: linear-gradient(90deg, #22c55e, #16a34a);
+}
+
+.timing-value {
+  font-weight: 600;
+  color: #1f2937;
+  font-size: 12px;
+  min-width: 60px;
+  text-align: right;
+}
+
+.timing-total {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+  margin-top: 8px;
+}
+
+.total-label {
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.total-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: #059669;
+}
+
+/* KPI Grid */
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.kpi-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.kpi-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.kpi-content {
+  flex: 1;
+  text-align: center;
+}
+
+.kpi-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 2px;
+  line-height: 1.2;
+}
+
+.kpi-label {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 2px;
+}
+
+.kpi-hint {
+  font-size: 10px;
+  color: #9ca3af;
+  line-height: 1.2;
+}
+
+.cost-card {
+  border-left: 4px solid #f59e0b;
+}
+
+.rows-card {
+  border-left: 4px solid #3b82f6;
+}
+
+.efficiency-card {
+  border-left: 4px solid #8b5cf6;
+}
+
+/* Recommendations */
+.recommendations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.recommendation-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #fffbeb;
+  border: 1px solid #fed7aa;
+  border-radius: 6px;
+}
+
+.rec-number {
+  background: #f59e0b;
+  color: white;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.rec-content {
+  flex: 1;
+}
+
+.rec-text {
+  font-size: 13px;
+  color: #92400e;
+  line-height: 1.4;
+}
+
+/* Optimization Success */
+.optimization-success {
+  background: white;
+  border: 1px solid #d1fae5;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.success-visual {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.success-checkmark {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.success-message {
+  flex: 1;
+}
+
+.success-primary {
+  font-size: 16px;
+  font-weight: 600;
+  color: #166534;
+  margin-bottom: 4px;
+}
+
+.success-secondary {
+  font-size: 14px;
+  color: #16a34a;
+  opacity: 0.8;
+}
+
+.performance-highlights {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.highlight-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #f0fdf4;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #166534;
+  font-weight: 500;
+}
+
+.highlight-icon {
+  font-size: 14px;
+}
+
+/* ===========================================
+   HISTORY BAR & COMPARISON STYLES
+   =========================================== */
+
+/* Results section wrapper */
+.results-section-wrapper {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: calc(100vh - 100px);
+}
+
+/* History Bar - Clean & Compact */
+.history-bar {
+  background: #fafafa;
+  border: 1px solid #d4d4d8;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.history-bar.collapsed .history-content {
+  display: none;
+}
+
+.history-bar.expanded .expand-arrow {
+  transform: rotate(90deg);
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+  background: #f4f4f5;
+  border-bottom: 1px solid #d4d4d8;
+}
+
+.history-header:hover {
+  background: #e4e4e7;
+}
+
+.history-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #18181b;
+}
+
+.history-icon {
+  font-size: 14px;
+  color: #71717a;
+}
+
+.history-count {
+  font-size: 11px;
+  color: #71717a;
+  font-weight: 400;
+}
+
+.history-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.selected-count {
+  font-size: 11px;
+  color: #059669;
+  font-weight: 500;
+}
+
+.btn-compare {
+  padding: 3px 8px;
+  background: #059669;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn-compare:hover {
+  background: #047857;
+}
+
+.expand-arrow {
+  font-size: 10px;
+  color: #71717a;
+  transform: rotate(0deg);
+  transition: transform 0.15s ease;
+}
+
+.history-content {
+  padding: 12px;
+  background: white;
+}
+
+.history-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  color: #71717a;
+  font-size: 13px;
+}
+
+.history-loading .loading-spinner {
+  width: 14px;
+  height: 14px;
+  border: 1px solid #e4e4e7;
+  border-left: 1px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.history-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 8px;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.history-item:hover {
+  background: #fafafa;
+  border-color: #d4d4d8;
+}
+
+.history-item.selected {
+  background: #eff6ff;
+  border-color: #3b82f6;
+}
+
+.history-checkbox {
+  flex-shrink: 0;
+}
+
+.history-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.history-title-text {
+  font-size: 12px;
+  font-weight: 500;
+  color: #18181b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 2px;
+}
+
+.history-meta {
+  font-size: 10px;
+  color: #71717a;
+  display: flex;
+  gap: 6px;
+}
+
+.history-performance {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.performance-excellent { background: #22c55e; }
+.performance-good { background: #f59e0b; }  
+.performance-fair { background: #ef4444; }
+.performance-poor { background: #dc2626; }
+.performance-unknown { background: #71717a; }
+
+.history-empty {
+  text-align: center;
+  padding: 24px 16px;
+  color: #71717a;
+  font-size: 13px;
+}
+
+.empty-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+  opacity: 0.7;
+}
+
+/* Compare View - Professional & Compact */
+.compare-container {
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #d4d4d8;
+}
+
+#compare-view {
+  overflow-y: auto;
+  max-height: none;
+}
+
+.compare-header {
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #d4d4d8;
+  display: none;
+}
+
+.compare-header.active {
+  display: block;
+}
+
+.query-selector {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.query-card {
+  flex: 1;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  padding: 12px;
+  text-align: left;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 13px;
+}
+
+.query-card.selected {
+  background: #eff6ff;
+  border-color: #3b82f6;
+}
+
+.query-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #71717a;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+}
+
+.query-card.selected .query-label {
+  color: #3b82f6;
+}
+
+.query-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #18181b;
+  margin-bottom: 4px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.query-summary {
+  font-size: 11px;
+  color: #059669;
+  font-weight: 500;
+}
+
+.vs-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 8px 0;
+}
+
+.vs-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #71717a;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 3px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swap-btn {
+  background: #f4f4f5;
+  color: #71717a;
+  border: 1px solid #e4e4e7;
+  border-radius: 3px;
+  padding: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swap-btn:hover {
+  background: #e4e4e7;
+}
+
+.compare-actions {
+  text-align: center;
+  margin-top: 8px;
+}
+
+.btn-analyze {
+  padding: 8px 16px;
+  background: #059669;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn-analyze:hover {
+  background: #047857;
+}
+
+.btn-analyze:disabled {
+  background: #a1a1aa;
+  cursor: not-allowed;
+}
+
+/* Phase 2: Enhanced Comparison Results */
+.comparison-results {
+  margin-top: 16px;
+}
+
+/* Enhanced Metrics Overview */
+.metrics-overview {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.metric-card {
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  padding: 12px;
+  text-align: center;
+}
+
+.metric-label {
+  font-size: 11px;
+  color: #71717a;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.metric-values {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.value-a, .value-b {
+  font-size: 15px;
+  font-weight: 600;
+  color: #18181b;
+}
+
+.vs-divider {
+  font-size: 11px;
+  color: #71717a;
+  font-weight: 400;
+}
+
+.metric-difference {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.metric-difference.better { color: #059669; }
+.metric-difference.worse { color: #dc2626; }
+.metric-difference.same { color: #71717a; }
+
+/* Detailed Metrics */
+.detailed-metrics h5 {
+  font-size: 13px;
+  font-weight: 600;
+  color: #18181b;
+  margin: 16px 0 8px 0;
+}
+
+.performance-comparison,
+.plans-comparison,
+.insights-comparison {
+  margin-bottom: 16px;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+}
+
+.performance-comparison h4,
+.plans-comparison h4,
+.insights-comparison h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #18181b;
+  margin: 0;
+  padding: 10px 12px;
+  background: #f4f4f5;
+  border-bottom: 1px solid #e4e4e7;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* ===========================================
+   METRICS TABLE STYLES - PROPERLY SCOPED
+   =========================================== */
+
+/* Traditional Metrics Table (for comparison views) */
+.metrics-table-wrapper {
+  overflow-x: auto;
+}
+
+table.metrics-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+  font-size: 13px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+table.metrics-table th {
+  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+  color: #1e293b;
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 12px;
+  border-bottom: 1px solid #e2e8f0;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+table.metrics-table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 12px;
+  font-weight: 500;
+  vertical-align: middle;
+  color: #374151;
+}
+
+table.metrics-table tr:last-child td {
+  border-bottom: none;
+}
+
+table.metrics-table tr:hover {
+  background: rgba(59, 130, 246, 0.02);
+}
+
+/* Performance Metrics Table (Flexbox Layout for Perf Tab) */
+.perf-metrics-table {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.perf-metrics-table .metric-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  font-size: 12px;
+  transition: background-color 0.2s ease;
+}
+
+.perf-metrics-table .metric-row:hover {
+  background: rgba(59, 130, 246, 0.03);
+  margin: 0 -8px;
+  padding: 8px 8px;
+  border-radius: 4px;
+}
+
+.perf-metrics-table .metric-row:not(:last-child) {
+  border-bottom: 1px solid rgba(59, 130, 246, 0.08);
+}
+
+.perf-metrics-table .metric-label {
+  color: #64748b;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.3px;
+}
+
+.perf-metrics-table .metric-value {
+  font-weight: 700;
+  color: #1e293b;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+/* Timeline Metrics Table (Flexbox Layout for Timeline Compare) */
+.timeline-metrics-table {
+  padding: 16px;
+}
+
+.timeline-metrics-table .metric-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.timeline-metrics-table .metric-row:last-child {
+  border-bottom: none;
+}
+
+.timeline-metrics-table .metric-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.timeline-metrics-table .metric-values {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+}
+
+.timeline-metrics-table .arrow {
+  color: #6b7280;
+}
+
+.timeline-metrics-table .metric-change {
+  font-size: 13px;
+  font-weight: 600;
+  min-width: 60px;
+  text-align: right;
+}
+
+.timeline-metrics-table .metric-change.positive {
+  color: #059669;
+}
+
+.timeline-metrics-table .metric-change.negative {
+  color: #dc2626;
+}
+
+/* ===========================================
+   END METRICS TABLE STYLES
+   =========================================== */
+
+.metric-better {
+  color: #059669;
+  font-weight: 600;
+}
+
+.metric-worse {
+  color: #dc2626;
+  font-weight: 600;
+}
+
+.metric-same {
+  color: #71717a;
+  font-weight: 400;
+}
+
+.winner-summary {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 4px;
+  padding: 12px;
+  margin: 16px 0;
+  text-align: center;
+  font-size: 13px;
+}
+
+.winner-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #166534;
+}
+
+.winner-icon {
+  font-size: 16px;
+}
+
+/* Enhanced Plan Comparison */
+.plan-overview {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background: #fafafa;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  font-size: 12px;
+}
+
+.plan-stats {
+  display: flex;
+  gap: 24px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: #71717a;
+  font-weight: 600;
+}
+
+.stat-values {
+  font-size: 12px;
+  color: #18181b;
+  font-weight: 600;
+}
+
+.plan-controls {
+  display: flex;
+  gap: 4px;
+}
+
+.plan-toggle {
+  padding: 4px 8px;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  color: #71717a;
+}
+
+.plan-toggle.active,
+.plan-toggle:hover {
+  background: #059669;
+  color: white;
+  border-color: #059669;
+}
+
+.plans-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 12px;
+}
+
+.plan-column {
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.plan-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f4f4f5;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.plan-header h5 {
+  font-size: 13px;
+  font-weight: 600;
+  color: #18181b;
+  margin: 0;
+}
+
+.plan-meta {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.plan-efficiency,
+.plan-bottleneck {
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-weight: 500;
+}
+
+.plan-efficiency {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.plan-bottleneck {
+  background: #fef2f2;
+  color: #991b1b;
+}
+
+/* Plan Overlay View */
+.plan-overlay {
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  padding: 12px;
+}
+
+.overlay-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #fafafa;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  font-size: 12px;
+}
+
+.overlay-legend {
+  display: flex;
+  gap: 16px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  border: 1px solid #d4d4d8;
+}
+
+.query-a-color { background: #3b82f6; }
+.query-b-color { background: #059669; }
+.common-color { background: #71717a; }
+
+.overlay-options {
+  display: flex;
+  gap: 12px;
+}
+
+.overlay-options label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #71717a;
+  cursor: pointer;
+}
+
+.overlay-options input[type="checkbox"] {
+  width: 12px;
+  height: 12px;
+}
+
+.overlay-content {
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  padding: 16px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  max-height: 400px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.overlay-node {
+  padding: 4px 8px;
+  margin: 2px 0;
+  border-radius: 2px;
+  position: relative;
+}
+
+.overlay-node.query-a {
+  background: rgba(59, 130, 246, 0.1);
+  border-left: 3px solid #3b82f6;
+}
+
+.overlay-node.query-b {
+  background: rgba(5, 150, 105, 0.1);
+  border-left: 3px solid #059669;
+}
+
+.overlay-node.common {
+  background: rgba(113, 113, 122, 0.05);
+  border-left: 3px solid #71717a;
+}
+
+.overlay-node.different {
+  background: rgba(239, 68, 68, 0.1);
+  border-left: 3px solid #ef4444;
+  border-right: 3px solid #ef4444;
+}
+
+.overlay-metrics {
+  position: absolute;
+  right: 8px;
+  top: 4px;
+  font-size: 10px;
+  color: #71717a;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+
+/* Plan Differences View */
+.plan-differences {
+  padding: 12px;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+}
+
+.diff-summary {
+  background: #fffbeb;
+  border: 1px solid #fed7aa;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.diff-details {
+  display: grid;
+  gap: 8px;
+}
+
+.plan-content {
+  background: white;
+  padding: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  max-height: 300px;
+  overflow-y: auto;
+  color: #18181b;
+}
+
+.plan-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.plan-content::-webkit-scrollbar-track {
+  background: #f4f4f5;
+}
+
+.plan-content::-webkit-scrollbar-thumb {
+  background: #d4d4d8;
+  border-radius: 2px;
+}
+
+/* Advanced Optimization Insights */
+.optimization-score {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.score-card {
+  text-align: center;
+  padding: 12px;
+  background: #fafafa;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+}
+
+.score-header {
+  font-size: 11px;
+  color: #71717a;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.score-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #18181b;
+  margin-bottom: 4px;
+}
+
+.score-grade {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 2px;
+}
+
+.grade-a { background: #dcfce7; color: #166534; }
+.grade-b { background: #fef3c7; color: #92400e; }
+.grade-c { background: #fed7aa; color: #9a3412; }
+.grade-d { background: #fecaca; color: #991b1b; }
+
+.score-comparison {
+  text-align: center;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.score-arrow {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.score-improvement {
+  font-weight: 600;
+}
+
+.score-improvement.better { color: #059669; }
+.score-improvement.worse { color: #dc2626; }
+
+/* Key Findings */
+.findings-section {
+  margin-bottom: 16px;
+}
+
+.findings-section h5 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #18181b;
+  margin: 0 0 12px 0;
+}
+
+.findings-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.finding-category {
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  padding: 12px;
+}
+
+.finding-category h6 {
+  font-size: 12px;
+  font-weight: 600;
+  color: #18181b;
+  margin: 0 0 8px 0;
+}
+
+.finding-category ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.finding-category li {
+  font-size: 12px;
+  color: #71717a;
+  padding: 4px 0;
+  border-bottom: 1px solid #f4f4f5;
+}
+
+.finding-category li:last-child {
+  border-bottom: none;
+}
+
+/* Recommendations */
+.recommendations-section {
+  margin-bottom: 16px;
+}
+
+.recommendations-section h5 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #18181b;
+  margin: 0 0 12px 0;
+}
+
+.recommendation-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.recommendation-priority {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.priority-high { background: #fecaca; color: #991b1b; }
+.priority-medium { background: #fef3c7; color: #92400e; }
+.priority-low { background: #e0e7ff; color: #3730a3; }
+
+.recommendation-text {
+  flex: 1;
+  color: #166534;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+/* Traditional Insights */
+.insights-list {
+  padding: 12px;
+}
+
+.insight-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  background: #fffbeb;
+  border: 1px solid #fed7aa;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.insight-icon {
+  font-size: 14px;
+  color: #d97706;
+  margin-top: 1px;
+  flex-shrink: 0;
+}
+
+.insight-text {
+  flex: 1;
+  color: #92400e;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.comparison-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: #71717a;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  margin: 16px 0;
+  font-size: 13px;
+}
+
+.comparison-loading .loading-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #f4f4f5;
+  border-left: 2px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+.comparison-loading p {
+  font-size: 13px;
+  font-weight: 400;
+  color: #71717a;
+}
+
+.comparison-empty {
+  text-align: center;
+  padding: 40px 16px;
+  color: #71717a;
+  background: white;
+  border: 1px solid #e4e4e7;
+  border-radius: 4px;
+  margin: 16px 0;
+  font-size: 13px;
+}
+
+.comparison-empty .empty-icon {
+  font-size: 32px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.comparison-empty h3 {
+  font-size: 15px;
+  font-weight: 600;
+  color: #18181b;
+  margin-bottom: 8px;
+}
+
+.comparison-empty p {
+  font-size: 13px;
+  line-height: 1.4;
+  max-width: 300px;
+  margin: 0 auto;
+  color: #71717a;
+}
+
+/* ===========================================
+   RESPONSIVE DESIGN
+   =========================================== */
+@media (max-width: 768px) {
+  .analysis-dashboard {
+    padding: 12px;
+  }
+  
+  .metric-chips {
+    flex-direction: column;
+  }
+  
+  .chip {
+    justify-content: center;
+  }
+  
+  .perf-status-banner {
+    flex-direction: column;
+    text-align: center;
+    gap: 12px;
+  }
+  
+  .timing-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+  
+  .timing-label {
+    min-width: auto;
+  }
+  
+  .timing-value {
+    text-align: left;
+  }
+  
+  .kpi-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .performance-highlights {
+    grid-template-columns: 1fr;
+  }
+  
+
+}
+
+@media (max-width: 480px) {
+  .analysis-dashboard {
+    padding: 8px;
+  }
+  
+  .metrics-section {
+    margin-bottom: 16px;
+  }
+  
+  .node-content {
+    padding: 8px 10px;
+  }
+  
+  .kpi-card {
+    padding: 12px;
+  }
+  
+  .success-visual {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+/* Enhanced Plan View Styles */
+.plan-analysis-section, .plan-breakdown-section, .plan-insights-section {
+  margin: 16px 0;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+}
+
+.plan-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.stat-content {
+  flex: 1;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 2px;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  line-height: 1.2;
+}
+
+.details-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #f1f5f9;
+  border-radius: 6px;
+}
+
+.detail-label {
+  font-size: 12px;
+  color: #475569;
+  font-weight: 500;
+}
+
+.detail-value {
+  font-weight: 600;
+  color: #1e293b;
+  font-size: 12px;
+}
+
+.plan-insights-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-top: 16px;
+}
+
+.insights-column h5 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.insight-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.insight-list li {
+  padding: 8px 12px;
+  margin-bottom: 6px;
+  background: #f9fafb;
+  border-left: 3px solid #d1d5db;
+  border-radius: 0 4px 4px 0;
+  font-size: 13px;
+  color: #374151;
+}
+
+/* Enhanced Performance View Styles - REMOVED CONFLICTING RULES */
+.advanced-metrics-table {
+  margin-top: 16px;
+}
+
+.metric-score {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+/* Compact Performance Dashboard */
+.perf-dashboard {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  min-height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+.perf-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  border-bottom: 1px solid #e2e8f0;
+  padding: 14px 18px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.perf-status {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 14px;
+}
+
+.perf-status.status-warning {
+  color: #d97706;
+}
+
+.status-warning-header {
+  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 20%, #ffffff 100%) !important;
+  border-left: 3px solid #f59e0b !important;
+}
+
+.perf-status.status-success {
+  color: #059669;
+}
+
+.status-success-header {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 20%, #ffffff 100%) !important;
+  border-left: 3px solid #22c55e !important;
+}
+
+.status-icon {
+  font-weight: bold;
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.perf-status.status-warning .status-icon {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  color: white;
+}
+
+.perf-status.status-success .status-icon {
+  background: linear-gradient(135deg, #34d399, #10b981);
+  color: white;
+}
+
+.status-text {
+  font-weight: 600;
+  flex: 1;
+  letter-spacing: -0.01em;
+}
+
+.perf-rating {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 6px 10px;
+  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
+  border-radius: 16px;
+  color: #475569;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+}
+
+.perf-rating:hover {
+  transform: translateY(-1px);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Compact Metrics Grid */
+.perf-metrics-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1px;
+  background: linear-gradient(45deg, #e2e8f0, #cbd5e1);
+  margin: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.metrics-group {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  padding: 18px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.metrics-group:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.metrics-group.timing-group {
+  background: linear-gradient(135deg, #fef7ff 0%, #faf5ff 50%, #ffffff 100%);
+  border-top: 2px solid #a855f7;
+}
+
+.metrics-group:nth-child(2) {
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #ffffff 100%);
+  border-top: 2px solid #0ea5e9;
+}
+
+.metrics-group.analysis-group {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #ffffff 100%);
+  border-top: 2px solid #22c55e;
+}
+
+.group-header {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  position: relative;
+}
+
+.timing-group .group-header {
+  color: #7c3aed;
+}
+
+.metrics-group:nth-child(2) .group-header {
+  color: #0369a1;
+}
+
+.analysis-group .group-header {
+  color: #166534;
+}
+
+/* Timing Bars */
+.timing-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.timing-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.timing-row.total-row {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid #f1f5f9;
+  font-weight: 600;
+}
+
+.timing-label {
+  width: 60px;
+  color: #6b7280;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.timing-bar-container {
+  flex: 1;
+  height: 6px;
+  background: linear-gradient(90deg, #f1f5f9, #e2e8f0);
+  border-radius: 3px;
+  overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.timing-bar {
+  height: 100%;
+  border-radius: 3px;
+  transition: all 0.3s ease;
+  animation: progressFill 0.8s ease-out;
+}
+
+@keyframes progressFill {
+  from {
+    width: 0 !important;
+  }
+  to {
+    width: inherit;
+  }
+}
+
+.planning-bar {
+  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
+  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.3);
+}
+
+.execution-bar {
+  background: linear-gradient(90deg, #10b981, #059669);
+  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
+}
+
+.timing-value, .timing-total {
+  width: 60px;
+  text-align: right;
+  font-weight: 600;
+  color: #1e293b;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-size: 11px;
+}
+
+.timing-total {
+  color: #7c3aed;
+  font-weight: 700;
+}
+
+/* DUPLICATE STYLES REMOVED - NOW PROPERLY ORGANIZED ABOVE */
+
+/* Analysis Table */
+.analysis-table {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.analysis-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0;
+  font-size: 12px;
+  transition: background-color 0.2s ease;
+}
+
+.analysis-row:hover {
+  background: rgba(34, 197, 94, 0.03);
+  margin: 0 -8px;
+  padding: 10px 8px;
+  border-radius: 6px;
+}
+
+.analysis-row:not(:last-child) {
+  border-bottom: 1px solid rgba(34, 197, 94, 0.08);
+}
+
+.analysis-metric {
+  flex: 1;
+  font-weight: 600;
+  color: #166534;
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.3px;
+}
+
+.analysis-score {
+  font-weight: 700;
+  font-size: 10px;
+  text-transform: uppercase;
+  padding: 4px 8px;
+  border-radius: 12px;
+  min-width: 65px;
+  text-align: center;
+  letter-spacing: 0.5px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.analysis-desc {
+  flex: 1;
+  color: #6b7280;
+  font-size: 10px;
+  text-align: right;
+  font-style: italic;
+}
+
+/* Recommendations */
+.recommendations-section {
+  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 20%, #ffffff 100%);
+  border-top: 1px solid #f59e0b;
+  padding: 18px;
+  box-shadow: inset 0 1px 0 rgba(251, 191, 36, 0.1);
+}
+
+.recommendations-section .group-header {
+  color: #92400e;
+  border-bottom-color: rgba(251, 191, 36, 0.2);
+}
+
+.recommendations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recommendation {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: 12px;
+  color: #92400e;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 6px;
+  border-left: 3px solid #f59e0b;
+  transition: all 0.2s ease;
+  line-height: 1.4;
+}
+
+.recommendation:hover {
+  background: rgba(255, 255, 255, 0.8);
+  transform: translateX(2px);
+  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1);
+}
+
+.rec-icon {
+  color: #f59e0b;
+  font-weight: bold;
+  margin-top: 1px;
+  font-size: 14px;
+}
+
+/* Responsive adjustments for desktop tools */
+@media (min-width: 1200px) {
+  .perf-metrics-grid {
+    grid-template-columns: 1fr 1fr 1.2fr;
+  }
+  
+  .analysis-group {
+    grid-column: span 1;
+  }
+}
+
+@media (max-width: 1024px) {
+  .perf-metrics-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .analysis-group {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 768px) {
+  .perf-metrics-grid {
+    grid-template-columns: 1fr;
+    gap: 1px;
+  }
+  
+  .timing-row {
+    gap: 6px;
+  }
+  
+  .timing-label {
+    width: 50px;
+  }
+  
+  .timing-value, .timing-total {
+    width: 50px;
+  }
+}
+
+/* Enhanced chip styles */
+.chip.secondary {
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: white;
+}
+
+.chip.accent {
+  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+  color: white;
+}
+
+.chip.warning {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  color: white;
+}
+
+/* Metric score coloring */
+.metric-score {
+  color: #374151;
+}
+
+.score-excellent {
+  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
+  color: white !important;
+  font-weight: 700;
+}
+
+.score-good {
+  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
+  color: white !important;
+  font-weight: 700;
+}
+
+.score-fair {
+  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
+  color: white !important;
+  font-weight: 700;
+}
+
+.score-poor {
+  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
+  color: white !important;
+  font-weight: 700;
+}
+
+.score-none {
+  background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
+  color: white !important;
+  font-weight: 700;
+} 
+
+/* Enhanced Performance Header */
+.status-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.status-context {
+  font-size: 11px;
+  font-weight: 400;
+  opacity: 0.85;
+  letter-spacing: 0.01em;
+}
+
+.perf-rating-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.perf-score {
+  font-size: 10px;
+  font-weight: 600;
+  color: #64748b;
+  padding: 2px 6px;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Enhanced Group Headers */
+.group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  position: relative;
+}
+
+.header-title {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.header-insight {
+  font-size: 10px;
+  font-weight: 500;
+  opacity: 0.7;
+  text-transform: capitalize;
+  letter-spacing: 0.02em;
+}
+
+/* Enhanced Timing Section */
+.timing-value-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  min-width: 75px;
+}
+
+.timing-percentage {
+  font-size: 9px;
+  color: #64748b;
+  font-weight: 500;
+  margin-top: 1px;
+}
+
+.timing-total-value {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-weight: 700;
+  color: #7c3aed;
+}
+
+.timing-benchmark {
+  font-size: 9px;
+  font-weight: 500;
+  color: #64748b;
+  margin-top: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Enhanced Metrics Section */
+.metric-row.primary-metric {
+  border: 1px solid rgba(59, 130, 246, 0.15);
+  background: rgba(59, 130, 246, 0.02);
+  border-radius: 6px;
+  padding: 10px 8px;
+  margin: 0 -8px 8px -8px;
+}
+
+.metric-value-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.metric-threshold {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.metric-threshold:contains("✓") {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.metric-threshold:contains("⚠") {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.metric-context {
+  font-size: 9px;
+  color: #64748b;
+  font-weight: 500;
+  font-style: italic;
+}
+
+/* Enhanced Analysis Section */
+.analysis-details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  flex: 1;
+}
+
+.analysis-impact {
+  font-size: 9px;
+  color: #059669;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+/* Smart Recommendations Section */
+.recommendations-header {
+  margin-bottom: 16px;
+}
+
+.recommendations-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.recommendation-card {
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  border-radius: 8px;
+  padding: 14px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.recommendation-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(180deg, #f59e0b, #d97706);
+}
+
+.recommendation-card:hover {
+  background: rgba(255, 255, 255, 0.95);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+.rec-priority {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.priority-indicator {
+  font-size: 9px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.priority-high {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+}
+
+.priority-medium {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: white;
+}
+
+.priority-low {
+  background: linear-gradient(135deg, #6b7280, #4b5563);
+  color: white;
+}
+
+.rec-impact {
+  font-size: 10px;
+  font-weight: 600;
+  color: #059669;
+  padding: 2px 6px;
+  background: #dcfce7;
+  border-radius: 6px;
+}
+
+.rec-text {
+  font-size: 12px;
+  color: #92400e;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+.rec-actions {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(245, 158, 11, 0.1);
+}
+
+.rec-hint {
+  font-size: 10px;
+  color: #6b7280;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-style: italic;
+  padding: 2px 6px;
+  background: #f8fafc;
+  border-radius: 4px;
+}
+
+/* No Recommendations Section */
+.no-recommendations-section {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 20%, #ffffff 100%);
+  border-top: 1px solid #22c55e;
+  padding: 20px;
+  box-shadow: inset 0 1px 0 rgba(34, 197, 94, 0.1);
+}
+
+.no-recommendations-section .group-header {
+  color: #166534;
+  border-bottom-color: rgba(34, 197, 94, 0.2);
+}
+
+.no-recommendations-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.performance-badges {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.perf-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.perf-badge.excellent {
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: white;
+}
+
+.perf-badge.good {
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+}
+
+.optimization-summary {
+  font-size: 12px;
+  color: #166534;
+  line-height: 1.5;
+  margin: 0;
+  font-style: italic;
+}
+
+/* Enhanced Responsive Design */
+@media (min-width: 1400px) {
+  .perf-metrics-grid {
+    grid-template-columns: 1fr 1.2fr 1.3fr;
+  }
+  
+  .recommendations-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .perf-metrics-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .analysis-group {
+    grid-column: span 2;
+  }
+  
+  .metric-value-group {
+    align-items: flex-start;
+  }
+  
+  .timing-value-group {
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 900px) {
+  .perf-header {
+    padding: 12px 14px;
+  }
+  
+  .perf-status {
+    gap: 10px;
+  }
+  
+  .status-details {
+    gap: 1px;
+  }
+  
+  .perf-rating-group {
+    align-items: flex-start;
+  }
+  
+  .metrics-group {
+    padding: 14px;
+  }
+  
+  .recommendation-card {
+    padding: 12px;
+  }
+}