.vehicle-card details > summary {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.vehicle-section-preview-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    max-width:48%;
    margin-left:auto;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(25,135,84,.16);
    color:#44d17d;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.vehicle-section-total-credit {
    background:rgba(25,135,84,.16);
    color:#44d17d;
}

.vehicle-section-total-cost {
    background:rgba(13,110,253,.16);
    color:#58a6ff;
}

.vehicle-section-status-date {
    background:rgba(13,110,253,.16);
    color:#58a6ff;
}

.vehicle-section-status-empty {
    background:rgba(108,117,125,.18);
    color:#aaa;
}

@media(max-width:420px) {
    .vehicle-card details > summary {
        align-items:flex-start;
    }

    .vehicle-section-preview-badge {
        max-width:44%;
        padding:4px 7px;
        font-size:11px;
    }
}

@media(prefers-color-scheme:light) {
    .vehicle-section-total-cost,
    .vehicle-section-status-date {
        color:#075eb5;
    }

    .vehicle-section-total-credit {
        color:#137b43;
    }

    .vehicle-section-status-empty {
        color:#666;
    }
}