/* Reset and base styles */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    margin-left: 0;  
    margin-top: 50px;
    background: #e9eef2; /* Lighter, softer background */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    touch-action: none;
    color: #333;
}

/* Title */
.page-title {
    position: fixed;
    left: 20px;
    top: 10px;
    transform: none; 
    font-size: 1.1em; /* Slightly larger */
    font-weight: 600; /* Semibold */
    color: #2c3e50; /* Darker title color */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Slightly reduced */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: rgba(255, 255, 255, 0.95); /* More opaque */
    padding: 10px 18px; /* More padding */
    border-radius: 8px; /* More rounded */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Softer shadow */
    z-index: 1000;
    border: 1px solid #e0e0e0; /* Subtle border */
    display: none; /* Hide the title as requested */
}

/* Controls and buttons */
.controls, .outline-buttons, .outline-history {
    background: white;
    padding: 18px; /* Increased padding */
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Softer, broader shadow */
    margin-bottom: 25px; /* More spacing */
    display: flex;
    gap: 12px; /* Increased gap */
    flex-wrap: wrap;
    max-width: 100%;
    align-items: center;
}

.tool-btn, .outline-btn {
    padding: 10px 18px; /* More padding */
    border: none;
    border-radius: 8px; /* More rounded */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-size: 1em;
    font-weight: 500;
    line-height: 1; /* Ensure text/emoji aligns well */
    display: flex; /* Use flexbox for centering content */
    align-items: center;
    justify-content: center;
}

.tool-btn {
    background: #3498db; /* A vibrant blue */
    color: white;
}

.tool-btn:hover {
    background: #2980b9; /* Darker blue on hover */
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.tool-btn.active {
    background: #2c3e50; /* Darker active state */
}

.tool-btn#fill {
    background: #e67e22; /* Orange for fill */
}

.tool-btn#fill:hover {
    background: #d35400;
}

.tool-btn#eraser {
    background: #e74c3c; /* Red for eraser */
}

.tool-btn#eraser:hover {
    background: #c0392b;
}

/* New: Style for the Magic Eraser tool button */
.tool-btn#magicEraser {
    background: #9b59b6; /* A distinct purple/pink for magic eraser */
}

.tool-btn#magicEraser:hover {
    background: #8e44ad;
}

.tool-btn#magicEraser.active {
    background: #6a1b9a; /* Darker purple active state */
}

/* New: Style for the Frame tool button */
.tool-btn#frame {
    background: #27ae60; /* Green for frame */
}

.tool-btn#frame:hover {
    background: #229954;
}

.tool-btn#frame.active {
    background: #1e8449; /* Darker green active state */
}

/* New: Style for the Pattern Fill tool button */
.tool-btn#patternFill {
    background: #e91e63; /* Pink for pattern fill */
}

.tool-btn#patternFill:hover {
    background: #c2185b;
}

.tool-btn#patternFill.active {
    background: #880e4f; /* Darker pink active state */
}

/* New: Styles for Flower Brush tool button */
.tool-btn#flowerBrush {
    background: #e91e63; /* Pink, similar to pattern for consistency */
    color: white;
}

.tool-btn#flowerBrush:hover {
    background: #c2185b;
}

.tool-btn#flowerBrush.active {
    background: #880e4f;
}

/* New: Styles for Star Brush tool button */
.tool-btn#starBrush {
    background: #FFD700; /* Gold, for stars */
    color: #444; /* Darker text for contrast */
}

.tool-btn#starBrush:hover {
    background: #FFC400;
}

.tool-btn#starBrush.active {
    background: #DAA520; /* Darker gold active state */
    color: white;
}

/* New: Styles for Heart Brush tool button */
.tool-btn#heartBrush {
    background: #e74c3c; /* Red, similar to eraser for consistency */
    color: white;
}

.tool-btn#heartBrush:hover {
    background: #c0392b;
}

.tool-btn#heartBrush.active {
    background: #900C3F; /* Darker red active state */
}

.tool-btn#onionSkin.active {
    background: #2c3e50; /* Darker active state for onion skin */
}

.outline-btn {
    background: #8e44ad; /* Purple for outline */
    color: white;
}

.outline-btn:hover {
    background: #9b59b6;
    transform: translateY(-3px);
}

.outline-btn.active {
    background: #6a1b9a !important; /* Deeper purple */
}

/* Specific style for the Favorite button */
.outline-btn#favoriteOutlineBtn {
    background: #FFD700; /* Gold color for favorite */
    color: #444; /* Darker text for contrast */
}

.outline-btn#favoriteOutlineBtn:hover {
    background: #FFC400; /* Slightly darker gold on hover */
}

.outline-btn#favoriteOutlineBtn.active {
    background: #DAA520 !important; /* Even darker gold when active/favorited */
    color: white; /* White text for active state */
}

.outline-btn#favoriteOutlineBtn:disabled {
    background-color: #cccccc;
    color: #888888;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.outline-btn.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    to { left: 100%; }
}

/* Color wheel container - now a square button that opens palette */
#colorWheel {
    position: relative;
    width: 45px; /* Slightly larger */
    height: 45px;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 8px; /* More rounded */
    background: white;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* Inner shadow for depth */
}

#colorWheel:hover {
    border-color: #a0a0a0; /* Darker border on hover */
    transform: scale(1.08); /* More pronounced scale */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#colorPreview {
    width: 100%;
    height: 100%;
    border-radius: 6px; /* Match outer border radius */
}

/* Color palette popup */
.color-palette {
    position: absolute;
    bottom: 55px; /* Adjusted position to open above */
    left: 50%; /* Center horizontally */
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10 columns for more density */
    gap: 4px; /* Slightly increased gap for squares */
    padding: 12px; /* Increased padding */
    background: white;
    border-radius: 12px; /* More rounded */
    box-shadow: 0 8px 30px rgba(0,0,0,0.25); /* Stronger, softer shadow */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) translateX(-50%); /* Adjusted for 'bottom' based animation, slides up, and centers horizontally */
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); /* Smoother animation */
    width: 320px; /* Slightly wider */
    min-width: 280px;
    border: 1px solid #e0e0e0; /* Subtle border */
}

.color-palette.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(-50%);
}

.color-square {
    width: 24px; /* Slightly larger squares */
    height: 24px;
    border-radius: 4px; /* More rounded */
    cursor: pointer;
    border: 1px solid #f0f0f0; /* Lighter default border */
    transition: all 0.2s ease;
}

.color-square:hover {
    transform: scale(1.25); /* More pronounced scale */
    border-color: #999;
    box-shadow: 0 0 8px rgba(0,0,0,0.2); /* Small shadow on hover */
    z-index: 1; /* Bring hovered square to front */
}

.color-square.active {
    border: 3px solid #3498db; /* Thicker, blue border for active */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.6); /* Matching shadow */
    transform: scale(1.1); /* Slightly scale active item */
}

/* Custom color picker input */
.color-picker-input-container {
    grid-column: 1 / -1; 
    padding-top: 10px; /* More space above input */
    border-top: 1px solid #eee; /* Separator line */
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

.color-picker-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 90%; /* Wider input */
    height: 35px; /* Taller input */
    background-color: #f8f8f8; /* Light background */
    border: 1px solid #ddd; /* Subtle border */
    cursor: pointer;
    padding: 0;
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; 
    transition: all 0.2s ease;
}

.color-picker-input:hover {
    border-color: #bbb;
}

.color-picker-input::-webkit-color-swatch-wrapper {
    padding: 4px; /* Inner padding */
}

.color-picker-input::-webkit-color-swatch {
    border: none; /* No inner border */
    border-radius: 4px; /* Match outer radius */
}

.color-picker-input::-moz-color-swatch-wrapper {
    padding: 4px;
}

.color-picker-input::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}

/* New: Opacity Control */
.opacity-control {
    grid-column: 1 / -1;
    padding-top: 10px;
    margin-top: 5px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.opacity-control label {
    font-size: 0.9em;
    color: #555;
    font-weight: 500;
}

.opacity-control input[type="range"] {
    width: 90%;
    -webkit-appearance: none;
    height: 8px;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%), 
                repeating-linear-gradient(45deg, #ccc 0, #ccc 5px, #eee 5px, #eee 10px); /* Checkerboard background */
    border-radius: 5px;
    outline: none;
    opacity: 0.8;
    transition: opacity .2s;
    background-blend-mode: multiply; /* Blend gradient over checkerboard */
}

.opacity-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3498db; /* Match current active color */
    cursor: grab;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.8);
}

.opacity-control input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.opacity-control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3498db;
    cursor: grab;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.8);
}

.opacity-control input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.opacity-control span {
    font-size: 0.85em;
    color: #777;
}

/* New: Pattern palette popup */
.pattern-palette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the modal */
    display: none; /* Hidden by default */
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    z-index: 1001; /* Higher than color palette */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -45%) scale(0.95); /* Adjusted for 'center' based animation */
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 90%;
    max-width: 400px; /* Max width for pattern palette */
    border: 1px solid #e0e0e0;
    flex-direction: column; /* Organize header and grid vertically */
}

.pattern-palette.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    display: flex; /* Display as flex when shown */
}

.pattern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.pattern-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.2em;
}

.pattern-header .close-btn {
    font-size: 25px; /* Smaller close button for palette */
    padding: 0;
}

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Larger pattern squares */
    gap: 10px;
    padding: 5px;
    max-height: 300px; /* Limit height for scrollability */
    overflow-y: auto;
}

.pattern-square {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #f0f0f0;
    transition: all 0.2s ease;
    background-color: #ffffff; /* Default background */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* Inner shadow for depth */
}

.pattern-square:hover {
    transform: scale(1.1);
    border-color: #999;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 1;
}

.pattern-square.active {
    border: 3px solid #e91e63; /* Active color from pattern fill button */
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.6);
    transform: scale(1.05);
}

/* Specific pattern styles for preview */
.pattern-square.spot {
    background-image: radial-gradient(circle at 50% 50%, #666 2.5px, transparent 2.5px);
    background-size: 18px 18px;
}

.pattern-square.zigzag {
    background-image: linear-gradient(135deg, #eee 25%, transparent 25%) -8px 0,
                      linear-gradient(225deg, #eee 25%, transparent 25%) -8px 0,
                      linear-gradient(315deg, #eee 25%, transparent 25%) 0 0,
                      linear-gradient(45deg, #eee 25%, #fff 25%) 0 0;
    background-size: 16px 16px;
    background-color: #fff;
}

.pattern-square.crosshatch {
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
                      linear-gradient(-45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 10px 10px;
    background-color: #fff;
}

.pattern-square.vertical_stripe {
    background-image: linear-gradient(90deg, #eee 50%, #fff 50%);
    background-size: 10px 100%;
}

.pattern-square.checkerboard {
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
                      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-color: #fff;
}

.pattern-square.diagonal_stripe {
    background-image: repeating-linear-gradient(45deg, #eee, #eee 5px, #fff 5px, #fff 10px);
}

/* New: Styles for uploaded pattern placeholder */
.pattern-square.uploaded {
    background-color: #f0f8ff; /* Light blue background for uploaded placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em; /* Smaller text for "Uploaded" */
    text-align: center;
    color: #555;
    background-repeat: no-repeat;
    background-size: cover; /* Cover the square with the image */
    background-position: center;
}

/* New: Pattern Upload Controls */
.pattern-upload {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
    width: 100%;
}

.pattern-upload .tool-btn {
    width: auto; /* Allow button to size based on content */
    padding: 8px 15px;
    font-size: 0.9em;
    background: #007bff; /* A nice blue for upload */
    color: white;
}

.pattern-upload .tool-btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

/* New: Pattern Size Control */
.pattern-size-control {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pattern-size-control label {
    font-size: 0.9em;
    color: #555;
    font-weight: 500;
}

.pattern-size-control input[type="range"] {
    width: 90%;
    -webkit-appearance: none;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

.pattern-size-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e91e63;
    cursor: grab;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.pattern-size-control input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.pattern-size-control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e91e63;
    cursor: grab;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.pattern-size-control input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.pattern-size-control span {
    font-size: 0.8em;
    color: #777;
}

/* New: Frame Shape Palette Modal - similar to pattern palette */
.frame-shape-palette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the modal */
    display: none; /* Hidden by default */
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    z-index: 1002; /* Even higher than pattern palette */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -45%) scale(0.95);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 90%;
    max-width: 350px; /* Slightly narrower than pattern palette */
    border: 1px solid #e0e0e0;
    flex-direction: column;
}

.frame-shape-palette.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    display: flex;
}

.frame-shape-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.frame-shape-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.2em;
}

.frame-shape-header .close-btn {
    font-size: 25px;
    padding: 0;
}

.frame-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Consistent square size */
    gap: 10px;
    padding: 5px;
    max-height: 250px; /* Slightly smaller height, could be scrollable */
    overflow-y: auto;
}

.frame-shape-square {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #f0f0f0;
    transition: all 0.2s ease;
    background-color: #ffffff;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
    display: flex; /* Center canvas preview */
    align-items: center;
    justify-content: center;
}

.frame-shape-square:hover {
    transform: scale(1.1);
    border-color: #999;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 1;
}

.frame-shape-square.active {
    border: 3px solid #27ae60; /* Active color from frame button */
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
    transform: scale(1.05);
}

/* New: Zoom controls group */
.zoom-controls {
    display: flex;
    gap: 8px; /* Smaller gap between zoom buttons */
    margin-left: 10px; /* Space from brush size */
}

/* New: Styles for zoom buttons, might be slightly different */
.zoom-controls .tool-btn {
    padding: 8px 12px; /* Smaller padding for zoom buttons */
    font-size: 1.1em;
}

/* Canvas */
#canvas, .onion-skin, .temp-canvas {
    background: white;
    border-radius: 12px; /* Consistent rounded corners */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Consistent shadow */
    cursor: crosshair;
    touch-action: none;
    transition: transform 0.1s ease;
    display: block; /* Ensure canvas is always visible */
    margin: 0 auto; /* Center the canvas */
}

#canvas {
    position: relative; /* Main canvas uses relative positioning */
    z-index: 1;
}

.onion-skin {
    position: absolute;
    pointer-events: none;
    opacity: 0.3;
    display: none;
    mix-blend-mode: multiply;
    z-index: 3;
    background: transparent;
}

/* New: Temporary canvas for tool previews */
.temp-canvas {
    position: absolute;
    pointer-events: none; /* Crucial: allows mouse events to pass through to the main canvas */
    z-index: 5; /* Above onion skin, so previews are clearly visible */
 
    background: transparent; /* Ensure it's transparent */
}

/* History thumbnails */
.history-thumbnail {
    width: 55px; /* Slightly larger */
    height: 55px;
    border-radius: 8px; /* More rounded */
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    object-fit: contain; /* Ensure image fits well */
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
}

.history-thumbnail:hover {
    transform: scale(1.15); /* More pronounced scale */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.history-thumbnail.active {
    border-color: #3498db; /* Consistent active color */
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.8);
}

/* Gallery modal */
.gallery-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Slightly darker overlay */
    backdrop-filter: blur(8px); /* More blur */
    display: flex; /* Use flex for centering */
    justify-content: center;
    align-items: center;
}

.gallery-content {
    position: relative;
    background: white;
    margin: 0; /* Remove margin, use flex for centering */
    padding: 0;
    border-radius: 20px; /* Even more rounded */
    width: 90%;
    max-width: 900px; /* Wider modal */
    max-height: 85vh; /* Taller modal */
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4); /* Stronger shadow */
    animation: fadeInScale 0.3s ease-out forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 35px; /* More padding */
    border-bottom: 1px solid #f0f0f0; /* Lighter border */
    background-color: #f8f9fa; /* Light header background */
}

.gallery-header h2 {
    margin: 0;
    color: #2c3e50;
    font-size: 26px; /* Larger title */
    font-weight: 600;
}

.gallery-tabs {
    display: flex;
    gap: 10px;
    margin-left: 20px;
    margin-right: auto; /* Push tab buttons to the left of the close button */
}

.gallery-tab-btn {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f0f0f0;
    color: #555;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
}

.gallery-tab-btn:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}

.gallery-tab-btn.active {
    background-color: #3498db;
    color: white;
    border-color: #3498db;
    box-shadow: 0 2px 5px rgba(52, 152, 219, 0.3);
}

.close-btn {
    background: none;
    border: none;
    font-size: 35px; /* Larger close button */
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: #000;
    transform: rotate(90deg); /* Little animation */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Slightly larger min-width */
    gap: 25px; /* Increased gap */
    padding: 35px; /* More padding */
    overflow-y: auto;
    max-height: calc(85vh - 100px); /* Adjust based on header height */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    justify-content: center; /* Center items if grid doesn't fill width */
}

.gallery-item {
    position: relative;
    border-radius: 12px; /* Consistent rounded corners */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fdfdfd; /* Lighter background */
    aspect-ratio: 4/3;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08); /* Subtle shadow for items */
}

.gallery-item:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 8px 30px rgba(0,0,0,0.2); /* Stronger shadow on hover */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.08); /* More zoom on image */
}

.gallery-item-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85)); /* Darker gradient */
    color: white;
    padding: 12px; /* More padding */
    font-size: 0.95em; /* Slightly larger font */
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item-title {
    opacity: 1;
}

.favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    z-index: 10;
}

.favorite-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

.favorite-btn.active {
    color: #FFD700; /* Gold for active (favorited) */
}

.empty-gallery-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: #666;
    font-size: 1.2em;
}