/* Base container for the editor */
        .pixel-editor-container {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 12px;
            background-color: #f4f4f5; /* zinc-100 */
            border-radius: 8px;
            border: 1px solid #e4e4e7; /* zinc-200 */
            max-width: 488px; 
            width: 100%; /* Force stacking */
            box-sizing: border-box;
            position: relative; /* <-- Added for modal positioning */
        }

        /* Main layout: Toolbar on left, Canvas on right */
        .editor-main {
            display: flex; 
            gap: 12px;
            align-items: stretch; /* Make both columns full height */
        }

        /* Toolbar for tools */
        .editor-toolbar {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 8px;
            background-color: #ffffff;
            border-radius: 6px;
            border: 1px solid #d4d4d8; /* zinc-300 */
            align-items: center;
            flex-shrink: 0; /* Prevent toolbar from shrinking */
        }

        .editor-toolbar .tool-button {
            width: 40px;
            height: 40px;
            padding: 8px;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
            background-color: #f4f4f5; /* zinc-100 */
            color: #3f3f46; /* zinc-700 */
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .editor-toolbar .tool-button:hover {
            background-color: #e4e4e7; /* zinc-200 */
        }

        .editor-toolbar .tool-button.active {
            background-color: #dbeafe; /* blue-100 */
            border-color: #60a5fa; /* blue-400 */
            color: #2563eb; /* blue-600 */
        }
        
        .editor-toolbar .tool-button svg {
            width: 100%;
            height: 100%;
            /* Fix for SVGs with fill attributes */
            stroke: currentColor;
            fill: currentColor;
        }
        
        /* Specific fill override for complex icons */
        .editor-toolbar .tool-button[data-tool="bucket"] svg,
        .editor-toolbar .tool-button[data-tool="eraser"] svg {
            fill: currentColor; /* New icons are single path, use currentColor */
            stroke: none;
        }

        /* Ensure shape tools are outlined, not filled */
        .editor-toolbar .tool-button[data-tool="pencil"] svg,
        .editor-toolbar .tool-button[data-tool="line"] svg,
        .editor-toolbar .tool-button[data-tool="rect"] svg,
        .editor-toolbar .tool-button[data-tool="circle"] svg {
            fill: none;
            stroke: currentColor;
        }
         
        /* Color picker and pen size container */
        .editor-toolbar .tool-options {
            margin-top: 8px;
            border-top: 1px solid #d4d4d8; /* zinc-300 */
            padding-top: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        /* Style the color input */
        .editor-toolbar .color-picker {
            width: 40px;
            height: 40px;
            border: 2px solid #e4e4e7; /* zinc-200 */
            border-radius: 6px;
            padding: 0;
            cursor: pointer;
            /* Hide the default input appearance */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: transparent;
            box-sizing: border-box;
        }
        /* Style the color picker's color preview */
        .editor-toolbar .color-picker::-webkit-color-swatch-wrapper {
            padding: 0;
            border-radius: 4px;
        }
        .editor-toolbar .color-picker::-webkit-color-swatch {
            border: none;
            border-radius: 4px;
        }
        .editor-toolbar .color-picker::-moz-color-swatch {
            border: none;
            border-radius: 4px;
        }
        
        /* New styles for slider thumb label */
        .pen-size-label-container {
            position: relative;
            width: 40px;
            height: 18px; /* Height of the thumb */
            margin-top: 8px;
            display: flex;
            align-items: center;
        }

        .pen-size-label {
            /* This is the new custom thumb */
            position: absolute;
            top: 50%; /* Center vertically on the track */
            left: 9px; /* Initial position (center of 18px thumb) */
            transform: translate(-50%, -50%); /* Center the label */
            
            width: 18px;
            height: 18px;
            background-color: #2563eb; /* blue-600 */
            color: #ffffff;
            border-radius: 50%;
            
            display: inline-flex;
            align-items: center;
            justify-content: center;
            
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            
            pointer-events: none; /* Allow clicks to go through to the slider */
            z-index: 2;
        }
        
        .editor-toolbar .pen-size {
            -webkit-appearance: none;
            appearance: none;
            width: 40px; 
            height: 8px;
            background: #e4e4e7; /* zinc-200 */
            border-radius: 5px;
            outline: none;
            cursor: pointer;
            margin: 0; 
            padding: 0; 
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Hide the default thumbs */
        .editor-toolbar .pen-size::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px; /* Must have a size to be clickable */
            height: 18px;
            background: transparent; /* Make it invisible */
            cursor: pointer;
        }

        .editor-toolbar .pen-size::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: transparent; /* Make it invisible */
            border: none;
            border-radius: 50%;
            cursor: pointer;
        }

        /* Canvas container */
        .canvas-container {
            position: relative;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #d4d4d8; /* zinc-300 */
            flex-shrink: 0; /* Set size with JS */
        }
        
        .canvas-container canvas {
            position: absolute;
            top: 0; 
            left: 0; 
            width: 100%;
            height: 100%;
            
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
        }
        
        /* Checkerboard background is at the very back */
        .canvas-container .background-canvas {
            z-index: 1;
        }
        
        /* Drawing canvas is on top of the background */
        .canvas-container .drawing-canvas {
            z-index: 2;
        }
        
        /* Pixel grid is on top of the drawing */
        .canvas-container .grid-canvas {
            z-index: 3;
            pointer-events: none; /* Let clicks go through to tool-canvas */
            
            background-image: 
                linear-gradient(
                    to right, 
                    #ccc 1px, /* A light grey line */
                    transparent 1px
                ),
                linear-gradient(
                    to bottom, 
                    #ccc 1px, /* A light grey line */
                    transparent 1px
                );
            background-size: calc(100% / 32) calc(100% / 32);
            background-position: -1px -1px; 
            
            display: none; /* Hide by default */
        }
        
        /* Class to toggle grid visibility */
        .canvas-container.grid-visible .grid-canvas {
            display: block;
        }

        /* Tool preview canvas is on the very top */
        .canvas-container .tool-canvas {
            z-index: 4;
            cursor: crosshair;
        }

        /* Import/Export buttons */
        .editor-io-buttons {
            display: flex;
            gap: 6px; /* Reduced gap */
        }

        .editor-io-buttons .io-button {
            flex-grow: 1;
            padding: 10px 16px;
            font-size: 0.875rem; /* 14px */
            font-weight: 600;
            text-align: center;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background-color: #2563eb; /* blue-600 */
            color: #ffffff;
            transition: background-color 0.2s ease;
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 40px; /* Set fixed height */
            box-sizing: border-box; /* Include padding in height */
        }
        
        .editor-io-buttons .io-button:hover {
            background-color: #1d4ed8; /* blue-700 */
        }
        
        .editor-io-buttons .io-button.secondary {
             background-color: #ffffff;
             color: #3f3f46; /* zinc-700 */
             border: 1px solid #d4d4d8; /* zinc-300 */
        }
        .editor-io-buttons .io-button.secondary:hover {
            background-color: #f4f4f5; /* zinc-100 */
        }
        
        /* Styles for icon button */
        .editor-io-buttons .io-button.icon-button {
            flex-grow: 0; /* Don't grow */
            flex-shrink: 0; /* Don't shrink */
            width: 40px; /* Fixed width */
            padding: 8px; /* Match tool buttons */
        }
        
        .editor-io-buttons .io-button.icon-button svg {
            width: 100%;
            height: 100%;
        }

        /* Active state for secondary buttons */
        .editor-io-buttons .io-button.secondary.active {
            background-color: #dbeafe; /* blue-100 */
            border-color: #60a5fa; /* blue-400 */
            color: #2563eb; /* blue-600 */
        }
        
        /* Disabled state for buttons */
        .editor-io-buttons .io-button:disabled {
            background-color: #f4f4f5; /* zinc-100 */
            color: #a1a1aa; /* zinc-400 */
            border-color: #e4e4e7; /* zinc-200 */
            cursor: not-allowed;
        }
        
        /* Hidden elements for functionality */
        .pixel-editor-container .hidden-input,
        .pixel-editor-container .hidden-link {
            display: none;
        }
        
        /* --- Confirmation Modal Styles --- */
        
        .confirm-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5); /* Dimming overlay */
            border-radius: 8px; /* Match container */
            
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            
            z-index: 100;
        }
        
        .confirm-modal-dialog {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 280px; /* Fixed width for the small modal */
        }
        
        .confirm-modal-message {
            margin: 0;
            font-size: 0.875rem; /* 14px */
            color: #3f3f46; /* zinc-700 */
            line-height: 1.5;
        }
        
        .confirm-modal-buttons {
            display: flex;
            gap: 8px;
            justify-content: flex-end; /* Align buttons to the right */
        }
        
        /* Modal buttons reuse .io-button styles */
        .confirm-modal-buttons .io-button {
            flex-grow: 0; /* Don't grow to fill */
            padding: 8px 12px; /* Smaller padding for modal */
            height: auto; /* Auto height */
        }