.ux-done-card{
    max-width:980px!important;
    padding:0!important;
    overflow:hidden!important;
}

.ux-done-hero{
    padding:34px 38px 28px;
    background:
        radial-gradient(circle at 14% 18%,rgba(5,150,105,.13),transparent 28%),
        linear-gradient(135deg,#ffffff,#f5fbff);
    border-bottom:1px solid #e4edf8;
}

.ux-done-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:22px;
}

.ux-done-title{
    margin:0!important;
    color:#0f172a!important;
    font-size:30px!important;
    font-weight:900!important;
    line-height:1.55!important;
}

.ux-done-subtitle{
    margin:8px 0 0!important;
    color:#64748b!important;
    font-size:14px!important;
    line-height:2!important;
}

.ux-done-badge{
    min-width:138px;
    height:44px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ecfdf5;
    color:#047857;
    font-size:13px;
    font-weight:900;
    border:1px solid #bbf7d0;
}

.ux-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:24px;
}

.ux-summary-item{
    padding:15px 16px;
    border:1px solid #e2edf8;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.ux-summary-label{
    display:block;
    margin-bottom:7px;
    color:#64748b;
    font-size:12px;
    font-weight:800;
}

.ux-summary-value{
    display:block;
    color:#0f172a;
    font-size:15px;
    font-weight:900;
    line-height:1.8;
}

.ux-done-body{
    padding:30px 38px 36px;
}

.ux-preview-section{
    margin-top:24px;
}

.ux-preview-section:first-child{
    margin-top:0;
}

.ux-preview-heading{
    margin:0 0 14px!important;
    color:#0f172a!important;
    font-size:19px!important;
    font-weight:900!important;
    line-height:1.7!important;
}

.ux-preview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;
}

.ux-preview-row{
    padding:14px 16px;
    border:1px solid #e4edf8;
    border-radius:17px;
    background:#fbfdff;
}

.ux-preview-row.ux-full{
    grid-column:1 / -1;
}

.ux-preview-label{
    display:block;
    margin-bottom:6px;
    color:#64748b;
    font-size:12px;
    font-weight:800;
}

.ux-preview-value{
    display:block;
    color:#111827;
    font-size:14px;
    font-weight:900;
    line-height:1.9;
    word-break:break-word;
}

.ux-files-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.ux-file-item{
    padding:15px 16px;
    border:1px solid #e4edf8;
    border-radius:18px;
    background:linear-gradient(180deg,#fff,#f8fbff);
}

.ux-file-title{
    display:block;
    color:#0f172a;
    font-size:13px;
    font-weight:900;
    margin-bottom:7px;
}

.ux-file-name{
    display:block;
    color:#334155;
    font-size:13px;
    font-weight:800;
    line-height:1.9;
    word-break:break-word;
}

.ux-file-meta{
    display:block;
    margin-top:6px;
    color:#64748b;
    font-size:12px;
}

.ux-empty{
    padding:15px 16px;
    border:1px dashed #cbdced;
    border-radius:18px;
    background:#f8fbff;
    color:#64748b;
    font-size:13px;
    font-weight:800;
    line-height:2;
}

.ux-done-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #e4edf8;
}

.ux-done-actions .btn{
    min-width:150px!important;
    height:52px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
}

@media (max-width:860px){
    .ux-done-hero,
    .ux-done-body{
        padding-left:22px;
        padding-right:22px;
    }

    .ux-done-title-row{
        display:block;
    }

    .ux-done-badge{
        margin-top:16px;
    }

    .ux-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ux-files-list{
        grid-template-columns:1fr;
    }
}

@media (max-width:560px){
    .ux-done-hero,
    .ux-done-body{
        padding:24px 16px;
    }

    .ux-done-title{
        font-size:23px!important;
    }

    .ux-summary-grid,
    .ux-preview-grid{
        grid-template-columns:1fr;
    }

    .ux-done-actions .btn{
        width:100%!important;
    }
}

/* DONE_IMAGE_PREVIEW_START */
.ux-files-list{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
}

.ux-file-item.ux-image-file{
    padding:12px!important;
    border-radius:20px!important;
    background:#fff!important;
    border:1px solid #e2edf8!important;
    box-shadow:0 12px 28px rgba(15,23,42,.055)!important;
}

.ux-file-thumb{
    width:100%;
    aspect-ratio:4 / 3;
    display:block;
    overflow:hidden;
    border-radius:16px;
    background:#f1f7ff;
    border:1px solid #e4edf8;
    margin-bottom:11px;
}

.ux-file-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .22s ease, filter .22s ease;
}

.ux-file-thumb:hover img{
    transform:scale(1.035);
    filter:saturate(1.04);
}

.ux-file-item.ux-image-file .ux-file-title{
    margin:0 2px 4px!important;
    color:#0f172a!important;
    font-size:13px!important;
    font-weight:900!important;
}

.ux-file-item.ux-image-file .ux-file-name{
    margin:0 2px!important;
    color:#334155!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.8!important;
    word-break:break-word!important;
}

.ux-file-item.ux-image-file .ux-file-meta{
    margin:5px 2px 0!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:700!important;
}

@media (max-width:860px){
    .ux-files-list{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

@media (max-width:560px){
    .ux-files-list{
        grid-template-columns:1fr!important;
    }

    .ux-file-thumb{
        aspect-ratio:16 / 10;
    }
}
/* DONE_IMAGE_PREVIEW_END */

/* COURSE_ATTACHMENTS_DONE_DESCRIPTION */
.ux-file-description{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:11px;
    font-weight:700;
    line-height:1.9;
}