.med { display: flex; flex-direction: column; gap: 16px; }

.med__upload[hidden] { display: none; }
.med__upload .sec__body { padding: 16px 20px 20px; }
.med__hint { margin: 12px 0 0; font-size: 13.5px; color: var(--text-muted); text-align: center; }

.med__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border: 1px solid var(--brand-300);
    border-radius: var(--radius-md);
    background: var(--brand-50);
}

.med__bar[hidden] { display: none; }
.med__count { font-size: 15px; font-weight: 650; color: var(--brand-700); }
.med__acts { display: flex; gap: 10px; flex-wrap: wrap; }

.btn--danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn--danger:hover { filter: brightness(.94); }
.btn--danger:disabled { opacity: .6; cursor: not-allowed; }

.med__empty {
    padding: 52px 24px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.med__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.mcard {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}

.mcard:hover { border-color: var(--brand-300); }
.mcard.is-selected { border-color: var(--brand); background: var(--brand-50); }

/* The whole thumbnail is the selection target, the footer holds the actions */
.mcard__pick {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 4 / 3;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-3);
    cursor: pointer;
}

.mcard__pick img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mcard__mark {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 7px;
    background: rgba(15, 30, 27, .35);
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.mcard:hover .mcard__mark { background: rgba(15, 30, 27, .5); }
.mcard.is-selected .mcard__mark { color: #fff; border-color: var(--brand); background: var(--brand); }
.mcard__pick:focus-visible .mcard__mark { box-shadow: 0 0 0 3px var(--brand-100); }

.mcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
}

.mcard__name {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcard__acts { display: flex; gap: 4px; flex-shrink: 0; }

.mact {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.mact:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.mact--del:hover { color: #b8322a; border-color: #f6cdc9; background: #fdeceb; }
.mact.is-confirm { color: #fff; border-color: var(--danger); background: var(--danger); }
.mact.is-ok { color: var(--brand); }

.dropzone {
    min-height: 150px;
    border: 2px dashed var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface-2) !important;
    transition: border-color .15s ease, background .15s ease;
}

.dropzone:hover { border-color: var(--brand-300) !important; background: var(--brand-50) !important; }
.dropzone .dz-message { margin: 34px 0 !important; }

.dropzone .dz-button {
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.dropzone .dz-button small { font-weight: 500; color: var(--text-soft); }

@media (max-width: 640px) {
    .med__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}