@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

.vault-card {
    @apply border border-gray-700 rounded-xl p-4 flex items-center transition-all duration-200;
    @apply hover:border-orange-500 hover:shadow-lg hover:-translate-y-1;
    @apply cursor-pointer;
}

.action-btn {
    @apply text-white rounded-lg px-4 py-3 flex items-center justify-center;
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

#dropzone {
    @apply border-2 border-dashed border-gray-600 rounded-xl p-8 text-center;
    @apply transition-all duration-200 hover:border-orange-500;
}

#dropzone.active {
    @apply border-orange-500 bg-orange-900/10;
}

.asset-card {
    @apply bg-gray-800 rounded-lg p-4 flex items-center;
    @apply hover:bg-gray-700 transition-colors cursor-pointer;
}

.gallery-item {
    @apply rounded-lg overflow-hidden relative group;
    aspect-ratio: 1/1;
}

.gallery-item img {
    @apply w-full h-full object-cover;
}

.gallery-item-overlay {
    @apply absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity;
    @apply flex items-center justify-center;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Animation for wrong passcode */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.shake {
    animation: shake 0.5s ease-in-out;
}

/* Clipboard image preview */
.clipboard-preview {
    @apply w-full h-auto rounded-lg mb-4 border border-gray-600;
}

/* Gallery modal */
.gallery-modal {
    @apply fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4;
}

.gallery-modal-content {
    @apply relative max-w-4xl w-full;
}

.gallery-modal-img {
    @apply max-h-[80vh] w-auto mx-auto;
}

.gallery-modal-close {
    @apply absolute -top-10 right-0 p-2 rounded-full hover:bg-gray-700;
}

.gallery-modal-controls {
    @apply absolute bottom-4 left-0 right-0 flex justify-center space-x-4;
}
.gallery-modal-btn {
    @apply p-3 bg-gray-800/80 rounded-full hover:bg-gray-700;
}

.transaction-card {
    @apply transition-colors hover:bg-gray-700/50 cursor-pointer;
}

/* Responsive wallet layout */
@media (max-width: 640px) {
    .wallet-grid {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-btn {
        width: 100%;
    }
}

/* Loading animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Enhanced security features */
.security-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/50 text-green-300;
}

.security-warning {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900/50 text-red-300;
}

/* Dark mode transitions */
html {
    transition: background-color 0.3s ease;
}

/* Accessibility improvements */
:focus-visible {
    @apply outline-none ring-2 ring-orange-500 ring-offset-2 ring-offset-gray-900;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}