.media-file-card{cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.media-file-card:hover{border-color:var(--ring)}.media-file-card__preview{aspect-ratio:1;background:var(--muted);width:100%;position:relative;overflow:hidden}.media-file-card__preview img{object-fit:cover;width:100%;height:100%}.media-file-card__placeholder{width:100%;height:100%;color:var(--muted-foreground);text-transform:uppercase;justify-content:center;align-items:center;font-size:24px;display:flex}.media-file-card__progress{background:color-mix(in oklab,var(--foreground)10%,transparent);height:4px;position:absolute;bottom:0;left:0;right:0}.media-file-card__info{padding:8px}.media-file-card__name{color:var(--foreground);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;overflow:hidden}.media-file-card__size{color:var(--muted-foreground);margin-top:2px;font-size:11px}.media-file-card__delete{background:color-mix(in oklab,var(--foreground)60%,transparent);width:24px;height:24px;color:var(--background);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;line-height:1;transition:background .2s;display:flex;position:absolute;top:4px;right:4px}.media-file-card__delete:hover{background:var(--destructive);color:var(--destructive-foreground)}
.media-uploader{width:100%}.media-uploader__header{justify-content:flex-end;align-items:center;gap:12px;margin-bottom:16px;display:flex}.media-uploader__counter{color:var(--muted-foreground);font-size:14px;font-weight:500}.media-uploader__grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:16px;display:grid}.media-uploader__dragzone{margin-top:16px}.media-uploader__dragzone-content{color:var(--muted-foreground);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:32px;display:flex}.media-uploader__dragzone-content svg{color:var(--muted-foreground);opacity:.7}.media-uploader__dragzone-text{color:var(--foreground);margin:0;font-size:16px;font-weight:500}.media-uploader__dragzone-hint{color:var(--muted-foreground);margin:0;font-size:14px}.media-uploader__spinner{border:3px solid var(--muted);border-top-color:var(--ring);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.media-uploader__empty{text-align:center;color:var(--muted-foreground);border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--muted);padding:48px}