    .event-card {
        border: 1px solid #e1e5eb;
        border-radius: 14px;
        overflow: hidden;
        background: #ffffff;
        transition: all 0.25s ease;
    }

    .event-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
    }

    .event-card-header {
        padding: 18px 16px 14px;
        border-bottom: 1px solid #e9ecef;
    }

    .event-title-container {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .event-color-line {
        width: 5px;
        height: 42px;
        border-radius: 20px;
        flex-shrink: 0;
    }

    .event-title {
        font-size: 16px;
        font-weight: 600;
        color: #343a40;
        margin: 0;
        line-height: 1.4;
    }

    .event-card-body {
        padding: 16px;
    }

    .event-info-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #74788d;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .event-info-item i {
        font-size: 16px;
        width: 16px;
        text-align: center;
    }

    .event-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 12px;
    }

    .event-badge {
        display: inline-block;
        padding: 4px 9px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
    }

    .event-description {
        color: #8a92a0;
        font-size: 13px;
        line-height: 1.6;
        margin: 12px 0 0;
    }

    .event-card-footer {
        padding: 12px 16px;
        border-top: 1px solid #e9ecef;
        background: #fcfcfd;
    }

    .event-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
    }

    .event-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    .event-actions {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .event-action-btn {
        width: 33px;
        height: 33px;
        border-radius: 9px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        font-size: 17px;
        transition: all 0.2s ease;
    }

    .view-btn {
        color: #0d6efd;
        border: 1px solid #0d6efd;
    }

    .view-btn:hover {
        background: #0d6efd;
        color: #ffffff;
    }

    .edit-btn {
        color: #74788d;
        border: 1px solid #adb5bd;
    }

    .edit-btn:hover {
        background: #74788d;
        color: #ffffff;
    }

    .delete-btn {
        color: #dc3545;
        border: 1px solid #dc3545;
    }

    .delete-btn:hover {
        background: #dc3545;
        color: #ffffff;
    }

    .event-checkbox {
        width: 17px;
        height: 17px;
        cursor: pointer;
    }

    .badge-meeting {
        color: #3b5ccc;
        background: #edf2ff;
    }

    .badge-training {
        color: #0f8b6d;
        background: #e7f8f2;
    }

    .badge-launch {
        color: #7c4dca;
        background: #f1eaff;
    }

    .badge-review {
        color: #bc6f00;
        background: #fff4db;
    }

    .badge-low {
        color: #198754;
        background: #dff7e8;
    }

    .badge-medium {
        color: #9a6614;
        background: #fff1cf;
    }

    .badge-high {
        color: #dc3545;
        background: #fde5e7;
    }

    .status-completed {
        color: #087f5b;
        background: #d9f8ed;
    }

    .status-upcoming {
        color: #0d6efd;
        background: #e6f0ff;
    }

    .status-pending {
        color: #b06b00;
        background: #fff2d1;
    }

    @media (max-width: 575px) {
        .event-card-footer {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 12px;
        }

        .event-actions {
            width: 100%;
            justify-content: flex-end;
        }
    }