:root {
    --bg-gradient-light: linear-gradient(to bottom right, rgba(239, 246, 255, 0.5), transparent, rgba(224, 231, 255, 0.5));
    --bg-gradient-dark: linear-gradient(to bottom right, rgba(17, 24, 39, 0.5), transparent, rgba(15, 23, 42, 0.5));
}

.dark {
    color-scheme: dark;
}

.dark body {
    background: var(--bg-gradient-dark);
    color: #e5e7eb;
}

.dark .bg-white {
    background-color: #1f2937;
}

.dark .bg-white\/80 {
    background-color: rgba(31, 41, 55, 0.8);
}

.dark .bg-white\/50 {
    background-color: rgba(31, 41, 55, 0.5);
}

.dark .border-gray-200 {
    border-color: rgba(75, 85, 99, 0.3);
}

.dark .border-gray-200\/50 {
    border-color: rgba(75, 85, 99, 0.15);
}

.dark .text-gray-600 {
    color: #9ca3af;
}

.dark .text-gray-900 {
    color: #f3f4f6;
}

.dark .bg-gradient-to-br {
    --tw-gradient-from: rgb(29, 78, 216, 0.8);
    --tw-gradient-to: rgb(67, 56, 202, 0.8);
}

.dark .bg-gray-100 {
    background-color: #374151;
}

.dark .hover\:bg-gray-50:hover {
    background-color: rgba(75, 85, 99, 0.2);
}

.dark .from-gray-900 {
    --tw-gradient-from: #f3f4f6;
}

.dark .to-gray-900 {
    --tw-gradient-to: #f3f4f6;
}

.dark .via-gray-800 {
    --tw-gradient-via: #e5e7eb;
}

.dark select {
    background-color: rgb(31, 41, 55, 0.8);
    color: #e5e7eb;
    border-color: rgba(75, 85, 99, 0.3);
}

.dark select option {
    background-color: rgb(31, 41, 55);
}

.dark .shadow-lg {
    --tw-shadow-color: rgba(0, 0, 0, 0.3);
}

.dark .bg-white\/95 {
    background-color: rgba(31, 41, 55, 0.95);
}

.dark .hover\:border-blue-500:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.dark .hover\:bg-gray-50:hover {
    background-color: rgba(75, 85, 99, 0.1);
}

.dark .from-blue-50\/50 {
    --tw-gradient-from: rgba(17, 24, 39, 0.5);
}

.dark .to-indigo-50\/50 {
    --tw-gradient-to: rgba(15, 23, 42, 0.5);
}

.dark #basicInfo > div,
.dark #exifInfo > div,
.dark #geoInfo > div,
.dark #technicalInfo > div {
    background-color: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.75rem;
    padding: 1rem;
}

.dark #basicInfo > div strong,
.dark #exifInfo > div strong,
.dark #geoInfo > div strong,
.dark #technicalInfo > div strong {
    color: #e5e7eb;
}

.dark #basicInfo > div span,
.dark #exifInfo > div span,
.dark #geoInfo > div span,
.dark #technicalInfo > div span {
    color: #9ca3af;
}

.dark .bg-clip-text.text-transparent.bg-gradient-to-r.from-gray-900.via-gray-800.to-gray-900 {
    --tw-gradient-from: #f3f4f6;
    --tw-gradient-via: #e5e7eb;
    --tw-gradient-to: #f3f4f6;
}

.dark input, 
.dark textarea, 
.dark select {
    background-color: #232d3b;  
    color: #e5e7eb;
    border-color: rgba(75, 85, 99, 0.5);
}

.dark input:focus, 
.dark textarea:focus, 
.dark select:focus {
    border-color: rgba(59, 130, 246, 0.5);
    background-color: #1f2937;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280;  
}

.dark .hover\:shadow-blue-500\/20:hover {
    --tw-shadow-color: rgba(59, 130, 246, 0.1);
}

.dark .hover\:border-white:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle-btn {
    background-color: transparent;
}

.dark .theme-toggle-btn {
    background-color: transparent;
}

.dark .fileem {
    background-color: rgb(31, 41, 55, 0.8);  
    border-color: rgba(75, 85, 99, 0.3);    
}