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

/* ===== DARK MODE ===== */
.dark body { 
    background-color: #0f172a; 
    color: #f1f5f9; 
}

.dark aside { 
    background-color: #1e293b; 
    border-color: #475569;
}

.dark main { 
    background-color: #0f172a; 
}

.dark #placeholder { 
    border-color: #475569; 
    background-color: #1e293b; 
    color: #94a3b8;
}

.dark #placeholder.dragover { 
    border-color: #3b82f6; 
    background-color: #334155; 
}

.dark .accordion-header, .dark #paletteContainer button { 
    color: #f1f5f9; 
}

.dark #paletteContainer button:not(.active-palette):hover { 
    background-color: #334155;
}

.dark #paletteContainer button.active-palette { 
    background-color: #1e40af !important; 
    border-color: #2563eb !important; 
    color: #eff6ff !important;
}

.dark hr { 
    border-color: #475569; 
}

.dark select, .dark input[type=range] { 
    background-color: #334155; 
    border-color: #475569; 
    color: #e2e8f0;
}

.dark .modal-content { 
    background-color: #1e293b; 
    color: #f1f5f9;
}

.dark #flyoutMenu { 
    background-color: #1e293b; 
    border-color: #475569;
}

.dark canvas { 
    background-color: #374151; 
    border-color: #4b5563; 
}

.dark #zoomControls {
    background-color: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(71, 85, 105, 0.5);
}

.dark #zoomControls button {
    background-color: #475569;
    border-color: #64748b;
    color: #e2e8f0;
}

.dark #zoomControls button:hover {
    background-color: #64748b;
}

.dark #zoomControls .bg-blue-500 {
    background-color: #3b82f6;
    color: white;
}

.dark #zoomControls .bg-blue-500:hover {
    background-color: #2563eb;
}

.dark #zoomDragHandle {
    color: #94a3b8;
}

.dark #zoomDragHandle:hover {
    color: #e2e8f0;
    background-color: rgba(71, 85, 105, 0.3);
}

/* Dark theme for mobile zoom controls */
@media (max-width: 768px) {
    .dark #zoomControls {
        background-color: rgba(15, 23, 42, 0.9) !important;
        border: 1px solid rgba(71, 85, 105, 0.5) !important;
    }
    
    .dark #zoomControls button {
        background-color: rgba(71, 85, 105, 0.3) !important;
        border-color: rgba(100, 116, 139, 0.4) !important;
        color: #e2e8f0 !important;
    }
    
    .dark #zoomControls button:hover,
    .dark #zoomControls button:active {
        background-color: rgba(71, 85, 105, 0.5) !important;
    }
    
    .dark #zoomControls .bg-blue-500 {
        background-color: #3b82f6 !important;
    }
    
    .dark #zoomControls .bg-blue-500:hover,
    .dark #zoomControls .bg-blue-500:active {
        background-color: #2563eb !important;
    }
}

/* ===== SHARED STYLES ===== */
canvas { 
    max-width: none; 
    height: auto; 
    border-radius: 0.5rem; 
    background-color: #ffffff; 
    border: 1px solid #e5e7eb; 
    image-rendering: pixelated; 
    image-rendering: -moz-crisp-edges; 
    image-rendering: crisp-edges; 
    transition: transform 0.1s ease-out;
}

.loader { 
    border: 4px solid #f3f4f6; 
    border-top: 4px solid #3b82f6; 
    border-radius: 50%; 
    width: 32px; 
    height: 32px; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

.controls-panel::-webkit-scrollbar { 
    width: 8px; 
}

.controls-panel::-webkit-scrollbar-track { 
    background: #f1f1f1; 
}

.dark .controls-panel::-webkit-scrollbar-track { 
    background: #374151; 
}

.controls-panel::-webkit-scrollbar-thumb { 
    background: #888; 
    border-radius: 4px; 
}

.controls-panel::-webkit-scrollbar-thumb:hover { 
    background: #555; 
}

.placeholder.dragover { 
    border-color: #3b82f6; 
    background-color: #eff6ff; 
}

.accordion-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out; 
}

.accordion-content.open { 
    max-height: 1000px; 
}

.accordion-arrow { 
    transition: transform 0.3s ease-out; 
}

.accordion-header.open .accordion-arrow { 
    transform: rotate(90deg); 
}

/* Active palette styling */
#paletteContainer button.active-palette {
    background-color: #dbeafe;
    border-color: #3b82f6;
}

.dark #paletteContainer button.active-palette {
    background-color: #1e3a8a;
    border-color: #60a5fa;
}

/* Canvas interactions */
#previewContainer {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: grab;
    overflow: hidden;
}

#previewContainer:active {
    cursor: grabbing;
}

#canvasDithered {
    transform-origin: 0 0;
    will-change: transform;
}

/* Prevent overscroll */
body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* ===== ZOOM CONTROLS ===== */
/* Desktop zoom controls */
#zoomControls {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 20;
    cursor: grab;
    touch-action: none;
    transition: all 0.2s ease;
}

#zoomControls:active {
    cursor: grabbing; /* Change cursor when dragging */
}

#zoomDragHandle {
    touch-action: none; /* Ensure drag handle responds to touch */
    user-select: none;
    -webkit-user-select: none;
}


/* ===== MOBILE LAYOUT ===== */
@media (max-width: 768px) {
    .mobile-layout { 
        flex-direction: column-reverse; 
    }
    
    .mobile-controls { 
        height: 45vh; 
        min-height: 350px;
        width: 100%;
    }
    
    .mobile-canvas { 
        height: 55vh;
        min-height: 300px;
        width: 100%;
    }
    
    header h1 {
        font-size: 1.5rem;
    }
    
    header p {
        font-size: 0.75rem;
    }

    /* Mobile zoom controls - compact top positioning */
    #zoomControls {
        position: fixed !important;
        top: 0.5rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 50 !important;
        background-color: rgba(0, 0, 0, 0.85) !important;
        border-radius: 0.5rem !important;
        padding: 0.25rem !important;
        width: auto !important;
        max-width: 90% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    }
    
    #zoomControls button {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
        color: white !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 0.375rem !important;
        transition: all 0.2s ease !important;
    }
    
    #zoomControls button:hover,
    #zoomControls button:active {
        background-color: rgba(255, 255, 255, 0.3) !important;
        transform: scale(1.05) !important;
    }
    
    #zoomControls span {
        color: white !important;
        font-size: 0.75rem !important;
    }
    
    #zoomControls .bg-blue-500 {
        background-color: #3b82f6 !important;
    }
    
    #zoomControls .bg-blue-500:hover,
    #zoomControls .bg-blue-500:active {
        background-color: #2563eb !important;
    }
    
    #zoomDragHandle {
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0.125rem !important;
        border-radius: 0.25rem !important;
        transition: all 0.2s ease !important;
    }
    
    #zoomDragHandle:hover,
    #zoomDragHandle:active {
        color: white !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    #loadingIndicator {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
    }
    
    #changelogContent {
        max-height: 150px;
        font-size: 0.8rem;
    }
}

/* ===== OTHER COMPONENTS ===== */
#changelogContent {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.75rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.dark #changelogContent {
    background-color: #1e293b;
    border-color: #475569;
}

#neonContainer {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

.dark #neonContainer {
    background-color: #1e293b;
    border-color: #475569;
}

#neonColor {
    height: 40px;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    cursor: pointer;
}

.dark #neonColor {
    border-color: #475569;
}

#neonEnabled {
    width: 1rem;
    height: 1rem;
    accent-color: #3b82f6;
}

.dark #neonEnabled {
    accent-color: #60a5fa;
}

.neon-preset {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.neon-preset:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.resolution-indicator {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background-color: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #6b7280;
}

.dark .resolution-indicator {
    background-color: #1e293b;
    border-color: #475569;
    color: #94a3b8;
}

.resolution-change-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    color: #3b82f6;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.resolution-change-btn:hover {
    color: #2563eb;
    background-color: #dbeafe;
}

.dark .resolution-change-btn:hover {
    background-color: #1e3a8a;
    color: #60a5fa;
}

#flyoutMenu {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dark #flyoutMenu {
    background-color: #1e293b;
    border-color: #475569;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

#flyoutMenu a,
#flyoutMenu button {
    color: #374151;
    transition: background-color 0.15s ease;
}

#flyoutMenu a:hover,
#flyoutMenu button:hover {
    background-color: #f3f4f6;
}

.dark #flyoutMenu a,
.dark #flyoutMenu button {
    color: #d1d5db;
}

.dark #flyoutMenu a:hover,
.dark #flyoutMenu button:hover {
    background-color: #334155;
}

#menuButton,
#presetMenuButton {
    transition: background-color 0.15s ease;
    color: #374151;
    position: relative;
}

#menuButton:hover,
#presetMenuButton:hover {
    background-color: #f3f4f6;
}

.dark #menuButton,
.dark #presetMenuButton {
    color: #d1d5db;
}

.dark #menuButton:hover,
.dark #presetMenuButton:hover {
    background-color: #334155;
}

.preset-section {
    position: relative;
}

#presetContextMenu {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0.25rem;
    z-index: 50;
    min-width: 10rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark #presetContextMenu {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

#presetContextMenu button {
    color: #374151;
    transition: background-color 0.15s ease;
}

#presetContextMenu button:hover {
    background-color: #f3f4f6;
}

.dark #presetContextMenu button {
    color: #d1d5db !important;
}

.dark #presetContextMenu button:hover {
    background-color: #334155 !important;
}

#clearAllPresets {
    color: #ef4444 !important;
}

#clearAllPresets:hover {
    background-color: #fee2e2 !important;
}

.dark #clearAllPresets:hover {
    background-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

#presetName {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #374151;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#presetName:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark #presetName {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.dark #presetName:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

.dark #presetName::placeholder {
    color: #94a3b8 !important;
}

#savePreset {
    background-color: #2563eb;
    color: #ffffff;
    transition: background-color 0.15s ease;
}

#savePreset:hover {
    background-color: #1d4ed8;
}

.preset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background-color: #f8fafc;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.dark .preset-item {
    background-color: #334155;
}

.preset-item:hover {
    background-color: #e2e8f0;
}

.dark .preset-item:hover {
    background-color: #475569;
}

.preset-name {
    flex: 1;
    text-align: left;
    font-weight: 500;
    color: #374151;
    transition: color 0.15s ease;
}

.preset-name:hover {
    color: #3b82f6;
}

.dark .preset-name {
    color: #e2e8f0;
}

.dark .preset-name:hover {
    color: #60a5fa;
}

.preset-delete {
    color: #ef4444;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.preset-delete:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

.dark .preset-delete:hover {
    background-color: #7f1d1d;
    color: #fca5a5;
}

.preset-empty {
    text-align: center;
    padding: 1rem;
    color: #9ca3af;
    font-style: italic;
    font-size: 0.75rem;
}