.upload-progress-panel {
    margin: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #cfe2ff;
    border-radius: .6rem;
    background: #f4f8ff;
    color: #172033;
}

.upload-progress-panel[hidden] {
    display: none !important;
}

.upload-progress-panel.is-error {
    border-color: #f1aeb5;
    background: #fff5f5;
}

.upload-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .55rem;
    font-size: .875rem;
}

.upload-progress-copy span {
    color: #6c757d;
    text-align: right;
}

.upload-progress-panel .progress {
    width: 100%;
    height: .7rem;
    margin-bottom: .65rem;
    overflow: hidden;
    border-radius: 999px;
    background: #dbe7f7;
}

.upload-progress-panel .progress-bar {
    height: 100%;
    background: #2563eb;
    transition: width .2s ease;
}

.upload-progress-panel .progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.upload-progress-panel .progress-bar-animated {
    animation: upload-progress-stripes 1s linear infinite;
}

.upload-progress-panel.is-error .progress-bar {
    background-color: #dc3545;
}

.upload-progress-panel [data-upload-cancel] {
    border: 1px solid #dc3545;
    border-radius: .35rem;
    padding: .35rem .65rem;
    background: transparent;
    color: #b42318;
    cursor: pointer;
}

.upload-file-hint {
    display: block;
    margin-top: .35rem;
    color: #64748b;
    overflow-wrap: anywhere;
}

@keyframes upload-progress-stripes {
    from { background-position-x: 1rem; }
    to { background-position-x: 0; }
}

@media (max-width: 576px) {
    .upload-progress-copy {
        flex-direction: column;
        gap: .2rem;
    }

    .upload-progress-copy span {
        text-align: left;
    }
}