@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #0f172a; } .health-card { background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(2, 6, 23, 0.9) 100%); border: 1px solid rgba(30, 41, 59, 0.5); border-radius: 16px; padding: 24px; transition: all 0.3s ease; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .health-card::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20%; background: linear-gradient(90deg, rgba(15, 23, 42, 0.3) 0%, rgba(59, 130, 246, 0.15) 100%); z-index: 1; } .health-card:hover::after { background: linear-gradient(90deg, rgba(15, 23, 42, 0.4) 0%, rgba(59, 130, 246, 0.25) 100%); } .health-card:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-color: rgba(59, 130, 246, 0.5); } .trend-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; } .trend-badge.positive { background-color: rgba(34, 197, 94, 0.1); color: rgb(34, 197, 94); border: 1px solid rgba(34, 197, 94, 0.3); } .trend-badge.negative { background-color: rgba(239, 68, 68, 0.1); color: rgb(239, 68, 68); border: 1px solid rgba(239, 68, 68, 0.3); } .mini-metric { padding: 12px 0; border-bottom: 1px solid rgba(30, 41, 59, 0.5); } .mini-metric:last-child { border-bottom: none; } .quick-action { background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(2, 6, 23, 0.9) 100%); border: 1px solid rgba(30, 41, 59, 0.5); border-radius: 12px; padding: 16px; transition: all 0.3s ease; text-align: center; } .quick-action:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: rgba(59, 130, 246, 0.5); }