:root {
    --primary-color: #0ea5e9; /* Tailwind sky-500 */
    --primary-dark: #0284c7; /* Tailwind sky-600 */
    
    --page-bg-light: #f1f5f9;   /* Tailwind slate-100 - Main page background */
    --page-bg-dark: #0b1120;   /* Custom dark slate for page background */

    --card-bg-light: #ffffff; /* For Login card */
    --card-bg-dark: #1e293b;  /* For Login card in dark mode */
    
    /* "Darker" cards for dashboard sections, these contrast with page-bg */
    --card-bg-section-light: #f8fafc; /* Tailwind slate-50, very light gray for a subtle difference */
    --card-bg-section-dark: #1f2937;  /* Tailwind slate-800, for distinct sections in dark mode */
    
    --text-color-light: #1e293b;   /* Tailwind slate-800 */
    --text-color-dark: #e2e8f0; /* Tailwind slate-200 */
    
    --border-light: #e2e8f0; /* Tailwind slate-200 */
    --border-dark: #334155; /* Tailwind slate-700 */

    --danger-color: #ef4444; /* Tailwind red-500 */
    --success-color: #10b981; /* Tailwind emerald-500 */
    --info-color: #3b82f6; /* Tailwind blue-500 */
    --white-color: #ffffff;
    
    /* More pronounced, refined shadows - can be overridden by Tailwind shadow utilities if preferred */
    --shadow-card-darker: 0 12px 24px -6px rgba(0, 0, 0, 0.2), 0 6px 12px -6px rgba(0, 0, 0, 0.15);
    --shadow-header: 0 5px 15px -3px rgba(0, 0, 0, 0.12);
    
    --card-radius: 0.75rem; /* rounded-xl in Tailwind */
}

/* Basic Reset & Body Styling are primarily handled by Tailwind via CDN */
body {
    /* Tailwind classes bg-slate-100 dark:bg-slate-950 etc. are on the body tag in HTML */
    /* Custom font can be set here if Tailwind defaults are not desired */
}

/* App Container & Views: JS toggles 'hidden' and 'flex' which are Tailwind classes */

/* Header Bar Styling */
#header-bar {
    height: 72px; /* Custom height */
    box-shadow: var(--shadow-header); /* Custom shadow variable */
    /* Other styles (bg, sticky, z-index, padding, flex) via Tailwind in HTML */
}


#modal-image-actions button { /* <-- CORRECTED ID */
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
}

#modal-image-actions button.modal-btn-add { /* <-- CORRECTED ID */
    background-color: var(--success-color);
    color: var(--white-color);
}
#modal-image-actions button.modal-btn-add:hover { /* <-- CORRECTED ID */
    background-color: #059669; /* darker emerald-600 */
}

#modal-image-actions button.modal-btn-remove { /* <-- CORRECTED ID */
    background-color: var(--info-color); /* Using info color for remove from slider */
    color: var(--white-color);
}
#modal-image-actions button.modal-btn-remove:hover { /* <-- CORRECTED ID */
    background-color: #2563eb; /* darker blue-600 */
}

#modal-image-actions button.modal-btn-delete { /* <-- CORRECTED ID */
    background-color: var(--danger-color);
    color: var(--white-color);
}
#modal-image-actions button.modal-btn-delete:hover { /* <-- CORRECTED ID */
    background-color: #dc2626; /* darker red-600 */
}


/* Login Card Enhancements */
.login-card { 
    box-shadow: var(--shadow-card-darker) !important; /* !important to ensure custom shadow overrides Tailwind if needed */
    /* Tailwind in HTML: bg-white dark:bg-slate-800 rounded-xl p-8 sm:p-10 w-full max-w-sm */
}

/* Dashboard Section Cards */
.dashboard-card-darker { /* Applied to all relevant section cards in HTML */
    background-color: var(--card-bg-section-light) !important; 
    box-shadow: var(--shadow-card-darker) !important; 
    border: 1px solid var(--border-light);
    border-radius: var(--card-radius);
    /* Tailwind p-6 in HTML handles internal padding */
}
.dark .dashboard-card-darker {
    background-color: var(--card-bg-section-dark) !important; 
    border-color: var(--border-dark);
}
.section-title { 
    /* Tailwind classes in HTML provide styling for this */
}


/* Image Management Upload Area */
#image-upload-area {
    /* Tailwind for base, custom for transition/hover not easily done with utilities if needed */
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
#image-upload-area:hover { transform: translateY(-2px); }
#image-upload-area .upload-icon svg { transition: transform 0.2s ease; }
#image-upload-area:hover .upload-icon svg { transform: scale(1.1); }

/* Progress Bar */
.progress-bar-container {
    background-color: #e5e7eb; /* Tailwind gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden; height: 10px;
    margin-top: 0.75rem; display: none; 
}
.dark .progress-bar-container { background-color: #374151; } /* slate-700 */
.progress-bar {
    width: 0%; height: 100%; background-color: var(--primary-color);
    transition: width 0.25s ease-out; text-align: center; line-height: 10px;
    color: white; font-size: 0.65rem; font-weight: 500;
}

/* Image Gallery Items */
.gallery-item {
	object-fit: cover; /* Optional: ensures images look good */	
	border-width: 3px; border-color: transparent;
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.gallery-item:hover { transform: scale(1.03); }
.gallery-item.selected { 
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 3px var(--primary-color); /* More prominent visual selection */
}
.gallery-item .delete-img-btn { /* Styling primarily via Tailwind in script.js */ }


/* Emoji Picker */
#emoji-selection-container::-webkit-scrollbar { width: 8px; }
#emoji-selection-container::-webkit-scrollbar-track { background: transparent; }
#emoji-selection-container::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; } 
.dark #emoji-selection-container::-webkit-scrollbar-thumb { background-color: #475569; } 

.emoji-option {
    transition: transform 0.1s ease, background-color 0.2s ease, color 0.2s ease;
    /* Tailwind classes in script.js: p-1.5 rounded-md text-2xl ... hover:scale-110 ... */
}
.emoji-option.selected { /* JS toggles 'selected' and Tailwind classes for bg/text color */
    transform: scale(1.1); 
    box-shadow: 0 0 0 2px var(--white-color), 0 0 0 4px var(--primary-color); 
}
.dark .emoji-option.selected {
    box-shadow: 0 0 0 2px var(--card-bg-dark), 0 0 0 4px var(--primary-dark);
}


/* Image Action Modal */
#image-action-modal {
    /* Uses fixed, inset-0, bg-opacity, flex, items-center, justify-center, p-4, z-[5000] via Tailwind in JS */
}
#image-action-modal .modal-content {
    /* Uses bg-white dark:bg-slate-800 p-6 rounded-lg shadow-xl max-w-sm w-full via Tailwind in JS */
    /* Can add specific non-Tailwind styles here if needed */
    animation: modal-fade-in 0.3s ease-out;
}

@keyframes modal-fade-in {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#modal-image-preview {
    /* Uses max-h-48 w-auto mx-auto mb-4 rounded via Tailwind in JS */
    border: 1px solid var(--border-light);
}
.dark #modal-image-preview {
    border: 1px solid var(--border-dark);
}

#modal-actions button {
    /* Basic styling, can be enhanced with Tailwind in JS */
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
}

#modal-actions button.modal-btn-add {
    background-color: var(--success-color);
    color: var(--white-color);
}
#modal-actions button.modal-btn-add:hover {
    background-color: #059669; /* darker emerald-600 */
}

#modal-actions button.modal-btn-remove {
    background-color: var(--info-color); /* Using info color for remove from slider */
    color: var(--white-color);
}
#modal-actions button.modal-btn-remove:hover {
    background-color: #2563eb; /* darker blue-600 */
}

#modal-actions button.modal-btn-delete {
    background-color: var(--danger-color);
    color: var(--white-color);
}
#modal-actions button.modal-btn-delete:hover {
    background-color: #dc2626; /* darker red-600 */
}

#modal-close-btn {
    /* Uses mt-4 w-full px-4 py-2 bg-slate-200 dark:bg-slate-600 rounded-md hover:bg-slate-300 dark:hover:bg-slate-500 via Tailwind in JS */
}

/* Style for gallery items in the slider */
.gallery-item.in-slider {
    border-color: var(--primary-color); /* Use existing selected style for "in slider" */
    box-shadow: 0 0 0 3px var(--primary-color);
}
.gallery-item.in-slider::after {
    content: '✔'; /* Checkmark to indicate it's in slider */
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 5; /* Ensure it's above the image but below the old delete button if it were there */
}
/* Remove old hover delete button from gallery items, as delete is now in modal */
.gallery-item .delete-img-btn {
    display: none !important;
}


/* Global Toast Notification (Top Center) */
#global-toast {
    position: fixed;
    top: 20px; 
    left: 50%;
    transform: translateX(-50%) translateY(-150%); /* Initial: off-screen above */
    padding: 1rem 1.75rem; 
    border-radius: 0.5rem; 
    box-shadow: var(--shadow-card-darker); 
    color: var(--white-color);
    font-size: 1rem; 
    font-weight: 500;
    z-index: 99999; 
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    min-width: 300px; 
    max-width: calc(100% - 40px); 
    text-align: center;
}
#global-toast.show { /* This class is added by JS to trigger the animation */
    opacity: 1;
    transform: translateX(-50%) translateY(0); 
}
/* Background colors are set by JS adding .success, .error, .info classes */
#global-toast.success { background-color: var(--success-color); }
#global-toast.error { background-color: var(--danger-color); }
#global-toast.info { background-color: var(--primary-color); }



/* ... (existing styles from previous step, including :root, body, login, header, dashboard cards, image management, image modal etc.) ... */

/* Image Gallery Items - Ensure these are present from previous step */
.gallery-item {
	object-fit: cover;	
	border-width: 3px; border-color: transparent;
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.gallery-item:hover { transform: scale(1.03); }

.gallery-item.in-slider { /* This was .selected before, renamed to .in-slider in previous step */
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 3px var(--primary-color);
}
.gallery-item.in-slider::after {
    content: '✔';
    position: absolute; top: 6px; right: 6px;
    background-color: var(--primary-color); color: white;
    border-radius: 50%; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold; z-index: 5;
}
.gallery-item .delete-img-btn { /* This was hidden in previous step by CSS, ensure it remains so or is removed from JS */
    display: none !important;
}

/* Emoji Picker - Font size will be set via Tailwind in JS. Padding can be adjusted here or in JS. */
#emoji-selection-container::-webkit-scrollbar { width: 8px; }
#emoji-selection-container::-webkit-scrollbar-track { background: transparent; }
#emoji-selection-container::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; } 
.dark #emoji-selection-container::-webkit-scrollbar-thumb { background-color: #475569; } 

.emoji-option { /* Base styles for emoji buttons */
    transition: transform 0.1s ease, background-color 0.2s ease, color 0.2s ease;
    line-height: 1.1 !important; /* Important for large emojis to not have excessive line height */
    display: inline-flex; /* Helps with alignment */
    align-items: center;
    justify-content: center;
    /* Tailwind classes in app.js: p-2 or p-3, rounded-md, text-6xl/7xl etc. */
}
.emoji-option.selected {
    transform: scale(1.05); /* Slight scale for selected */
    /* Background and shadow are handled by JS toggling Tailwind classes */
}


/* Emoji Action Modal (similar to Image Action Modal) */
#emoji-action-modal {
    /* Uses Tailwind classes like: fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-[5001] */
}
#emoji-action-modal .modal-content {
    /* Uses Tailwind classes like: bg-white dark:bg-slate-800 p-6 rounded-lg shadow-xl max-w-xs w-full */
    animation: modal-fade-in 0.3s ease-out;
}
/* Keyframes modal-fade-in should already be defined from image modal */

#modal-emoji-preview {
    /* Tailwind: text-7xl or text-8xl, mx-auto mb-4 text-center */
    padding: 0.5rem; /* Add some padding around the large emoji */
}

#emoji-modal-actions button {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
}

#emoji-modal-actions button.modal-btn-add-widget,
#emoji-modal-actions button.modal-btn-add-sticker {
    background-color: var(--success-color);
    color: var(--white-color);
}
#emoji-modal-actions button.modal-btn-add-widget:hover,
#emoji-modal-actions button.modal-btn-add-sticker:hover {
    background-color: #059669; /* darker emerald-600 */
}

#emoji-modal-actions button.modal-btn-remove-widget,
#emoji-modal-actions button.modal-btn-remove-sticker {
    background-color: var(--info-color);
    color: var(--white-color);
}
#emoji-modal-actions button.modal-btn-remove-widget:hover,
#emoji-modal-actions button.modal-btn-remove-sticker:hover {
    background-color: #2563eb; /* darker blue-600 */
}

#emoji-modal-close-btn {
    /* Uses Tailwind like: mt-4 w-full px-4 py-2 bg-slate-200 dark:bg-slate-600 rounded-md ... */
}


/* Global Toast Notification - Should be present from previous step */
#global-toast {
    /* ... styles from previous step ... */
}
/* ... etc ... */

/* Mobile specific tweaks - ensure emoji sizes are reasonable */
@media (max-width: 640px) {
    /* ... other mobile styles ... */
    #emoji-selection-container { gap: 0.5rem; } /* Adjust gap for larger emojis */
    .emoji-option { 
        /* JS will set text-5xl or text-6xl for mobile via sm: breakpoint negation. */
        /* e.g., text-6xl sm:text-7xl */
    }
    #selected-emojis-preview {
        font-size: 2.25rem; /* text-4xl */
    }
    #modal-emoji-preview {
        /* JS will set font size. Ensure it's not too large for modal on mobile. */
    }
}


/* Modal is removed from HTML structure, so no custom modal CSS needed here anymore */

/* Mobile specific tweaks */
@media (max-width: 640px) {
    #dashboard-view { padding: 0.75rem; }
    .dashboard-card-darker { padding: 1rem; }
    .section-title { font-size: 1.125rem; } 
    
    #global-toast {
        max-width: calc(100% - 20px); 
        padding: 0.75rem 1rem; font-size: 0.9rem;
        top: 10px; /* Adjust for smaller screens if header is smaller */
    }
    #global-toast.show { top: 10px; transform: translateX(-50%) translateY(0); }
    
    #image-gallery-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;} 
    #image-upload-area { padding: 1.25rem; } 
    #image-upload-area .upload-icon svg { width: 2rem; height: 2rem; } 
    #image-upload-area p { font-size: 0.875rem; }
    #image-upload-area .text-xs { font-size: 0.7rem; }
    #header-bar { height: 64px; } 
}