[v-cloak],
[un-cloak] {
    display: none !important;
}

html, body {
    height: 100%;
    height: 100dvh;
    height: -webkit-fill-available;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", sans-serif;
    background-color: #f4f4f5;
    color: #18181b;
    transition: background-color 0.2s, color 0.2s;
}

html.dark body {
    background-color: #09090b;
    color: #e4e4e7;
}

.font-mono {
    font-family: "JetBrains Mono", monospace;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}

[contenteditable]:focus {
    outline: 1px dashed #60a5fa;
    background: rgba(96, 165, 250, 0.05);
}

[contenteditable]:empty:before {
    content: attr(placeholder);
    color: #9ca3af;
    pointer-events: none;
    display: block;
}

.ratio-4-5 {
    aspect-ratio: 4 / 5;
}

.animate-shimmer {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

.dark .animate-shimmer {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.is-rendering .no-render {
    display: none !important;
}

.is-rendering [contenteditable]:empty:before {
    display: none !important;
    content: "" !important;
}

.is-rendering * {
    scrollbar-width: none !important;
}

.is-rendering *::-webkit-scrollbar {
    display: none !important;
}

.is-rendering .overflow-y-auto {
    overflow-y: hidden !important;
}

@keyframes progress-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes indeterminate-slide {
    0%   { left: -50%; }
    100% { left: 100%; }
}

.render-progress-fill {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 40%, #93c5fd 50%, #60a5fa 60%, #3b82f6 100%);
    background-size: 200% 100%;
    animation: progress-shimmer 1.5s linear infinite;
    transition: width 0.3s ease;
}

/* Arrange Slide list transitions */
.slide-list-move {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-list-enter-active {
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-list-leave-active {
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
    overflow: hidden;
}
.slide-list-enter-from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
}
.slide-list-leave-to {
    opacity: 0;
    max-height: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
    transform: scale(0.95);
}

/* Guard rails for data-asset upload buttons */
[data-crop-slot] button {
    z-index: 999999 !important;
    pointer-events: auto !important;
}
.slide-list-leave-from {
    max-height: 500px;
}



/* EasyMDE Dark Mode Overrides */
html.dark .editor-toolbar {
    background-color: #09090b !important;
    border-color: #27272a !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
html.dark .editor-toolbar > button {
    color: #a1a1aa !important;
}
html.dark .editor-toolbar > button:hover, 
html.dark .editor-toolbar > button.active {
    background-color: #27272a !important;
    color: #fff !important;
    border-color: #27272a !important;
}
html.dark .editor-toolbar i.separator {
    border-left-color: #27272a !important;
    border-right-color: #27272a !important;
}
html.dark .CodeMirror {
    background-color: #09090b !important;
    color: #e4e4e7 !important;
    border-color: #27272a !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
html.dark .editor-preview {
    background-color: #09090b !important;
    color: #e4e4e7 !important;
}

/* Fix Chrome's SVG foreignObject rendering bug where backdrop-filter blur leaks outside of element bounds */
[class*="backdrop-blur"],
[style*="backdrop-filter"] {
    clip-path: inset(0 round var(--blur-radius, 0px));
}
[class*="backdrop-blur"].rounded-sm, [style*="backdrop-filter"].rounded-sm { --blur-radius: 2px; }
[class*="backdrop-blur"].rounded, [style*="backdrop-filter"].rounded { --blur-radius: 4px; }
[class*="backdrop-blur"].rounded-md, [style*="backdrop-filter"].rounded-md { --blur-radius: 6px; }
[class*="backdrop-blur"].rounded-lg, [style*="backdrop-filter"].rounded-lg { --blur-radius: 8px; }
[class*="backdrop-blur"].rounded-xl, [style*="backdrop-filter"].rounded-xl { --blur-radius: 12px; }
[class*="backdrop-blur"].rounded-2xl, [style*="backdrop-filter"].rounded-2xl { --blur-radius: 16px; }
[class*="backdrop-blur"].rounded-3xl, [style*="backdrop-filter"].rounded-3xl { --blur-radius: 24px; }
[class*="backdrop-blur"].rounded-full, [style*="backdrop-filter"].rounded-full { --blur-radius: 9999px; }