/* Cross-cutting overrides on top of Tailwind Play CDN. */

html, body { height: 100%; }

/* Custom scrollbar (webkit) — subtle, theme-aware. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); border: 2px solid transparent; background-clip: padding-box; }

/* Focus rings — visible without being ugly. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth route transitions. */
.view-enter { opacity: 0; transform: translateY(4px); }
.view-enter-active { opacity: 1; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; }

/* Toast animation. */
@keyframes toastIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.toast { animation: toastIn .18s ease; }

/* Modal backdrop fade. */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal-backdrop { animation: fadeIn .15s ease; }

/* Drag handle for designer rows. */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.is-dragging { opacity: .4; }
.drop-target { outline: 2px dashed #60a5fa; outline-offset: -2px; }

/* Pretty empty states. */
.empty-state svg { color: #94a3b8; }