.drop-zone {
    position      : relative;
    border        : 1.5px dashed var(--bs-border-color);
    border-radius : var(--bs-border-radius-lg);
    background    : var(--bs-secondary-bg);
    padding       : 2.5rem 2rem;
    text-align    : center;
    cursor        : pointer;
    transition    : border-color 0.2s, background 0.2s;
    overflow      : hidden;
}

.drop-zone:hover {
    border-color : var(--bs-border-color-translucent);
    background   : var(--bs-body-bg);
}

.drop-zone.drag-over {
    border-color : #185FA5;
    background   : #E6F1FB;
    border-style : solid;
}

.drop-zone.has-file {
    border-style : solid;
    border-color : #0F6E56;
    background   : #E1F5EE;
}

.dz-icon {
    width         : 48px; height : 48px;
    margin        : 0 auto 1rem;
    display       : flex; align-items : center; justify-content : center;
    border-radius : 50%;
    background    : var(--bs-body-bg);
    border        : 1px solid var(--bs-border-color);
    transition    : transform 0.2s;
}

.drop-zone:hover .dz-icon { transform : scale(1.08); }
.drop-zone.drag-over .dz-icon { transform : scale(1.15); }
.dz-icon svg { width : 22px; height : 22px; color : var(--bs-secondary-color); }

.dz-title {
    font-size     : 15px;
    font-weight   : 500;
    color         : var(--bs-body-color);
    margin-bottom : 4px;
}

.dz-subtitle {
    font-size     : 13px;
    color         : var(--bs-secondary-color);
    margin-bottom : 1.25rem;
}

.dz-btn {
    display       : inline-block;
    font-size     : 13px;
    font-weight   : 500;
    padding       : 7px 18px;
    border-radius : var(--bs-border-radius);
    border        : 1px solid var(--bs-border-color);
    background    : var(--bs-body-bg);
    color         : var(--bs-body-color);
    cursor        : pointer;
    transition    : background 0.15s, transform 0.1s;
}

.dz-btn:hover { background : var(--bs-secondary-bg); }

.dz-btn:active { transform : scale(0.97); }

.dz-types {
    margin-top     : 1rem;
    font-size      : 11px;
    color          : var(--bs-tertiary-color);
    letter-spacing : 0.02em;
}

.file-preview {
    display       : none;
    align-items   : center;
    gap           : 12px;
    background    : var(--bs-body-bg);
    border        : 1px solid var(--bs-border-color);
    border-radius : var(--bs-border-radius);
    padding       : 10px 14px;
    margin-top    : 1rem;
}

.file-preview.visible { display : flex; animation : slideIn 0.25s ease; }

@keyframes slideIn {
    from { opacity : 0; transform : translateY(6px); }
    to { opacity : 1; transform : translateY(0); }
}

.file-icon {
    width         : 36px; height : 36px; flex-shrink : 0;
    border-radius : var(--bs-border-radius);
    display       : flex; align-items : center; justify-content : center;
    font-size     : 11px; font-weight : 500;
}

.file-icon.type-pdf { background : #FCEBEB; color : #791F1F; }

.file-icon.type-doc { background : #E6F1FB; color : #0C447C; }

.file-icon.type-img { background : #E1F5EE; color : #0F6E56; }

.file-icon.type-zip { background : #FAEEDA; color : #633806; }

.file-icon.type-file { background : var(--bs-secondary-bg); color : var(--bs-secondary-color); }

.file-info { flex : 1; min-width : 0; }

.file-name { font-size : 13px; font-weight : 500; color : var(--bs-body-color); white-space : nowrap; overflow : hidden; text-overflow : ellipsis; }

.file-size { font-size : 11px; color : var(--bs-secondary-color); margin-top : 2px; }

.file-remove {
    width         : 28px; height : 28px; flex-shrink : 0;
    border-radius : 50%;
    border        : 1px solid var(--bs-border-color);
    background    : transparent;
    color         : var(--bs-secondary-color);
    cursor        : pointer;
    display       : flex; align-items : center; justify-content : center;
    transition    : background 0.15s, color 0.15s;
    font-size     : 16px; line-height : 1;
}

.file-remove:hover { background : #FCEBEB; color : #791F1F; border-color : #F09595; }

.drag-ripple {
    position       : absolute; inset : 0;
    pointer-events : none;
    border-radius  : var(--bs-border-radius-lg);
    opacity        : 0;
    transition     : opacity 0.2s;
    background     : radial-gradient(ellipse at center, rgba(24, 95, 165, 0.08) 0%, transparent 70%);
}

.drop-zone.drag-over .drag-ripple { opacity : 1; }