body { padding: 40px 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } .container-fluid { max-width: 1400px; } .status-healthy { color: #198754; } .status-degraded { color: #ffc107; } .status-unhealthy { color: #dc3545; } .badge-healthy { background-color: #198754; } .badge-degraded { background-color: #ffc107; color: #000; } .badge-unhealthy { background-color: #dc3545; } .card { margin-bottom: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: none; transition: transform 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .card-header { font-weight: 600; border-radius: 12px 12px 0 0 !important; padding: 1rem 1.5rem; } .metric { padding: 12px 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; } .metric:last-child { border-bottom: none; } .metric-label { font-weight: 500; color: #666; } .metric-value { color: #333; font-weight: 600; } .refresh-info { position: fixed; bottom: 20px; right: 20px; background: white; padding: 12px 20px; border-radius: 50px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 14px; font-weight: 500; } .spinner { animation: spin 2s linear infinite; display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #667eea; border-radius: 50%; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .header-card { background: white; border-radius: 16px; padding: 2rem; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .nav-links { background: white; border-radius: 12px; padding: 1rem; margin-bottom: 20px; } .nav-links a { margin-right: 15px; text-decoration: none; font-weight: 500; }