/* Drop Zone */
.drop-zone {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23CBD5E1FF' stroke-width='3' stroke-dasharray='12%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    transition: all 0.3s ease;
}
.drop-zone.drag-over {
    background-color: #F0F9FF;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%233B82F6FF' stroke-width='3' stroke-dasharray='12%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    transform: scale(1.01);
}
.glass-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}
.spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 3px solid #ffffff;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Blob animation */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -20px) scale(1.05); }
    66%       { transform: translate(-20px, 20px) scale(0.95); }
}
.animate-blob { animation: blob 8s infinite ease-in-out; }
.animation-delay-2000 { animation-delay: 2s; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Blog / Article */
.prose h2 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { font-size: 1.2rem; font-weight: 600; color: #1e293b; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p  { color: #475569; line-height: 1.85; margin-bottom: 1.25rem; }
.prose ul, .prose ol { color: #475569; line-height: 1.85; margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: #1e293b; font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; }
.prose th { background: #f1f5f9; padding: 0.75rem 1rem; text-align: left; font-weight: 600; border: 1px solid #e2e8f0; color: #334155; }
.prose td { padding: 0.75rem 1rem; border: 1px solid #e2e8f0; color: #475569; }
.prose tr:nth-child(even) td { background: #f8fafc; }
.prose blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; color: #64748b; font-style: italic; margin: 1.5rem 0; }

/* Callout box */
.callout { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 1.5rem 0; color: #1e40af; }
.callout strong { color: #1e3a8a; }

/* Breadcrumb */
.breadcrumb a { color: #64748b; }
.breadcrumb a:hover { color: #2563eb; }
.breadcrumb span { color: #94a3b8; margin: 0 0.4rem; }