.dropzone{@apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-all duration-200 bg-gray-50;}.dropzone:hover{@apply border-primary bg-primary/5;}.dropzone.drag-over{@apply border-primary bg-primary/10 border-solid;}.dropzone-content{@apply flex flex-col items-center justify-center space-y-2;}.file-preview{@apply relative bg-white border border-gray-200 rounded-lg p-4 shadow-sm;}.file-preview:hover{@apply shadow-md;}.media-grid{@apply grid gap-4;}.media-grid.grid-1{@apply grid-cols-1;}.media-grid.grid-2{@apply grid-cols-1 md:grid-cols-2;}.media-grid.grid-3{@apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3;}.media-grid.grid-4{@apply grid-cols-1 md:grid-cols-2 lg:grid-cols-4;}.sortable-ghost{@apply opacity-50;}.sortable-chosen{@apply ring-2 ring-primary;}.sortable-drag{@apply shadow-lg transform rotate-3;}.upload-progress{@apply w-full bg-gray-200 rounded-full h-2 mb-3;}.upload-progress-bar{@apply bg-primary h-2 rounded-full transition-all duration-300;}.media-type-icon{@apply absolute top-2 left-2 bg-white/80 backdrop-blur-sm rounded-full w-8 h-8 flex items-center justify-center text-sm;}.media-type-icon.gallery{@apply text-green-600;}.media-type-icon.video{@apply text-blue-600;}.media-type-icon.infographic{@apply text-purple-600;}.media-overlay{@apply absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center space-x-2;}@keyframes upload-pulse{0%,to{opacity:1}50%{opacity:.5}}.uploading{animation:upload-pulse 1.5s ease-in-out infinite}.file-size{@apply text-xs text-gray-500 font-mono;}.upload-error{@apply border-red-300 bg-red-50 text-red-600;}.upload-error .dropzone-content i{@apply text-red-400;}.upload-success{@apply border-green-300 bg-green-50;}.upload-success .dropzone-content i{@apply text-green-400;}.media-modal{@apply fixed inset-0 z-50 flex items-center justify-center bg-black/80;}.media-modal-content{@apply bg-white rounded-lg max-w-4xl max-h-full overflow-auto m-4;}.media-modal img,.media-modal video{@apply max-w-full max-h-[80vh] object-contain;}@media (max-width: 640px){.dropzone{@apply p-4;}.file-preview{@apply p-3;}.media-grid{@apply grid-cols-1;}}@media (prefers-color-scheme: dark){.dropzone{@apply border-gray-600 bg-gray-800;}.dropzone:hover{@apply border-primary-400 bg-primary-900/20;}.file-preview{@apply bg-gray-800 border-gray-700;}}.file-removing{@apply transform scale-95 opacity-0 transition-all duration-200;}.drag-handle{@apply cursor-move text-gray-400 hover:text-gray-600;}.upload-queue{@apply space-y-2 mt-4;}.upload-queue-item{@apply flex items-center space-x-3 p-3 bg-gray-50 rounded-lg;}.upload-queue-item.uploading{@apply bg-blue-50 border border-blue-200;}.upload-queue-item.success{@apply bg-green-50 border border-green-200;}.upload-queue-item.error{@apply bg-red-50 border border-red-200;}@tailwind base;@tailwind components;@tailwind utilities;.cms-card{@apply bg-white shadow-sm border border-gray-200;}.card-shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.btn-primary{@apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;}.btn-secondary{@apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors;}.btn-danger{@apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;}.form-input{@apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;}.form-label{@apply block text-sm font-medium text-gray-700 mb-2;}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.5) transparent}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#9ca3afcc}.social-icon{filter:grayscale(100%);transition:all .3s ease}.social-card:hover .social-icon{filter:grayscale(0%)}.social-card.instagram:hover .social-icon{color:#c13584!important}.social-card.facebook:hover .social-icon{color:#1877f2!important}.social-card.twitter:hover .social-icon{color:#000!important}.social-card.youtube:hover .social-icon{color:red!important}.social-card.tiktok:hover .social-icon{color:#25f4ee!important}.social-card.linkedin:hover .social-icon{color:#0a66c2!important}.social-card.whatsapp:hover .social-icon{color:#25d366!important}
