/* Nav gradient */
.share-nav {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

/* Dropzone hover/active states */
.dropzone {
  transition: border-color 0.2s, background 0.2s;
}
.dropzone.drag-over {
  border-color: #4f46e5;
  background: #eef2ff;
}

/* Loading spinner */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e0e7ff;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* File type icon cells */
.file-icon {
  font-size: 1.4rem;
  line-height: 1;
}

/* Table row hover */
#files-tbody tr:hover {
  background: #f9fafb;
}

/* Action buttons */
.btn-view {
  @apply text-indigo-600 hover:text-indigo-800 font-medium text-xs px-2 py-1 rounded hover:bg-indigo-50 transition;
}
.btn-delete {
  @apply text-red-500 hover:text-red-700 font-medium text-xs px-2 py-1 rounded hover:bg-red-50 transition;
}

/* Modal image */
#modal-body img {
  max-width: 100%;
  border-radius: 8px;
}

/* Markdown prose */
#modal-body h1, #modal-body h2, #modal-body h3 { font-weight: 700; margin-top: 1rem; }
#modal-body p { margin: 0.5rem 0; line-height: 1.7; }
#modal-body code { background: #f3f4f6; padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.85em; }
#modal-body pre { background: #1f2937; color: #f9fafb; padding: 1rem; border-radius: 8px; overflow-x: auto; }
#modal-body ul, #modal-body ol { padding-left: 1.5rem; margin: 0.5rem 0; }
#modal-body li { margin: 0.25rem 0; }