:root {
        --blood-red: #e74c3c;
        --deep-red: #c0392b;
        --white: #ffffff;
        --soft-red: #fff5f5;
        --shadow: 0 10px 30px rgba(231, 76, 60, 0.15);
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .blood-dashboard {
        padding: 80px 5%;
        background-color: var(--soft-red);
        font-family: 'Poppins', sans-serif;
    }

    .section-title h2 {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 10px;
        position: relative;
    }

    .section-title p {
        color: #7f8c8d;
        margin-bottom: 40px;
    }

    .blood-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    /* Modern Card Design */
    .blood-card {
        background: var(--white);
        border-radius: 24px;
        padding: 30px;
        box-shadow: var(--shadow);
        transition: var(--transition);
        border: 1px solid rgba(231, 76, 60, 0.1);
        position: relative;
        overflow: hidden;
    }

    .blood-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(231, 76, 60, 0.25);
    }

    .blood-card h3 {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #2c3e50;
        margin-bottom: 20px;
        font-size: 1.3rem;
    }

    .blood-card h3 i {
        color: var(--blood-red);
    }

    /* Table Styling */
    .blood-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .blood-table th {
        text-align: left;
        color: #95a5a6;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding-bottom: 10px;
    }

    .blood-table td {
        padding: 12px 0;
        border-bottom: 1px solid #f1f1f1;
        font-weight: 500;
        color: #34495e;
    }

    /* Badge Design */
    .badge {
        padding: 5px 12px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-success { background: #d4f8e2; color: #27ae60; }
    .badge-danger { 
        background: #ffe5e5; 
        color: #e74c3c;
        animation: blink 1.5s infinite;
    }

    @keyframes blink {
        50% { opacity: 0.6; }
    }

    /* List Item Design */
    .list-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 15px;
        background: #fdfdfd;
        transition: 0.3s;
    }

    .list-item:hover {
        background: #fffafa;
    }

    .blood-icon-bg {
        width: 45px;
        height: 45px;
        background: var(--soft-red);
        color: var(--blood-red);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    /* Special CTA Card (Save a Life) */
    .cta-card {
        background: linear-gradient(135deg, var(--blood-red), var(--deep-red)) !important;
        color: white !important;
        border: none !important;
    }

    .cta-card h3 { color: white !important; }
    .cta-card p { opacity: 0.9; line-height: 1.6; }

    .cta-card ul {
        list-style: none;
        padding: 0;
        margin: 20px 0;
    }

    .cta-card ul li {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9rem;
    }

    .btn-donate {
        background: var(--white);
        color: var(--blood-red);
        border: none;
        padding: 15px 25px;
        border-radius: 15px;
        cursor: pointer;
        width: 100%;
        font-weight: 700;
        font-size: 1rem;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .btn-donate:hover {
        transform: scale(1.02);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .btn-see-more {
        background: #f8f9fa;
        border: 1px solid #eee;
        color: #7f8c8d;
        padding: 10px;
        width: 100%;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 600;
        transition: 0.3s;
    }

    .btn-see-more:hover {
        background: #edf2f7;
        color: var(--blood-red);
    }