/* ===== Glassmorphism ===== */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.dark .glass {
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Dark Mode Body Background (default) ===== */
html.dark body {
    background-color: #0f172a !important;
    background-image: radial-gradient(at 20% 80%, rgba(59,130,246,0.12) 0, transparent 50%), radial-gradient(at 80% 20%, rgba(139,92,246,0.08) 0, transparent 50%) !important;
}

/* ===== Light Mode Body Background (when dark class removed) ===== */
html:not(.dark) body {
    background-color: #f8fafc;
    background-image: radial-gradient(at 20% 80%, rgba(59,130,246,0.08) 0, transparent 50%), radial-gradient(at 80% 20%, rgba(139,92,246,0.06) 0, transparent 50%);
}

/* ===== Button Micro-interaction ===== */
.btn-modern {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-modern:hover {
    transform: translateY(-1px);
}
.btn-modern:active {
    transform: translateY(0) scale(0.98);
}

/* ===== Upload Zone ===== */
.upload-zone {
    border: 2px dashed #94a3b8;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.upload-zone.dragover {
    border-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.05);
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.dark .upload-zone.dragover {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #60a5fa;
}

/* ===== Preview Grid ===== */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
}

/* ===== Radio Button Styles (Size / Format) ===== */
.size-radio:checked + label,
.format-radio:checked + label {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}
.dark .size-radio:checked + label,
.dark .format-radio:checked + label {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* ===== Compress Format Radios ===== */
.compress-format-radio:checked + label {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}
.compress-format-radio:checked + label span {
    color: white;
}
.dark .compress-format-radio:checked + label {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
.dark .compress-format-radio:checked + label span {
    color: white;
}

/* ===== Progress Bar ===== */
.progress-bar {
    transition: width 0.3s ease;
}

/* ===== Image Cards ===== */
.image-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ===== Toggle Switch (Checkbox) ===== */
.toggle-checkbox:checked + .toggle-label .toggle-dot {
    transform: translateX(1.5rem);
}
.toggle-checkbox:checked + .toggle-label .toggle-bg {
    background: #3b82f6;
}
.dark .toggle-checkbox:checked + .toggle-label .toggle-bg {
    background: #3b82f6;
}
.dark .toggle-label .toggle-bg {
    background: #4b5563;
}

/* ===== Animations ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* ===== Mode Tabs ===== */
.mode-tab {
    transition: all 0.3s ease;
}
.mode-tab.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.dark .mode-tab.active {
    background: #3b82f6;
    color: white;
}
.mode-tab:not(.active) {
    color: #4b5563;
}
.dark .mode-tab:not(.active) {
    color: #d1d5db;
}
.mode-tab:not(.active):hover {
    background-color: #f3f4f6;
}
.dark .mode-tab:not(.active):hover {
    background-color: #374151;
}