| /* Error Boundary Fallback Styling */ | |
| .error-boundary-fallback { | |
| background: #fff; | |
| border: 2px solid #fecaca; | |
| border-radius: 12px; | |
| padding: 32px; | |
| text-align: center; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); | |
| } | |
| .error-boundary-icon { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| } | |
| .error-boundary-fallback h3 { | |
| margin: 0 0 8px 0; | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: #991b1b; | |
| } | |
| .error-boundary-fallback p { | |
| margin: 0 0 24px 0; | |
| font-size: 14px; | |
| color: #6b7280; | |
| } | |
| .error-boundary-actions { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: center; | |
| margin-bottom: 16px; | |
| } | |
| .error-boundary-btn { | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| border: none; | |
| } | |
| .error-boundary-btn.primary { | |
| background: #667eea; | |
| color: white; | |
| } | |
| .error-boundary-btn.primary:hover { | |
| background: #5568d3; | |
| } | |
| .error-boundary-btn.secondary { | |
| background: #e5e7eb; | |
| color: #374151; | |
| } | |
| .error-boundary-btn.secondary:hover { | |
| background: #d1d5db; | |
| } | |
| .error-boundary-details { | |
| margin-top: 16px; | |
| text-align: left; | |
| background: #f9fafb; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| padding: 12px; | |
| } | |
| .error-boundary-details summary { | |
| cursor: pointer; | |
| font-weight: 600; | |
| font-size: 13px; | |
| color: #6b7280; | |
| margin-bottom: 8px; | |
| } | |
| .error-boundary-stack { | |
| margin: 8px 0 0 0; | |
| padding: 12px; | |
| background: #1f2937; | |
| color: #f9fafb; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-family: 'Courier New', monospace; | |
| overflow-x: auto; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |