/* 1. Base Reset for Full Screen */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden; 
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            box-sizing: border-box; 
        }

        /* 2. Main Container Setup (Flexbox for Layout) */
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        /* Header/Controls Area (Fixed Height) */
        .header-controls {
            padding: 15px 20px;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            flex-shrink: 0; 
            display: flex; /* Use flex to align buttons horizontally */
            align-items: center;
            gap: 10px;
        }

        h1 {
            font-size: 1.5em;
            margin: 0;
            margin-right: 20px;
            white-space: nowrap;
        }

        /* 3. Editing Area (Grows to Fill Remaining Space) */
        .editor-area {
            flex-grow: 1; 
            background-color: #333; 
            overflow: hidden; 
            display: flex; 
            justify-content: center;
            align-items: center;
            position: relative; 
        }

        /* Buttons and Status */
        button {
            padding: 10px 15px;
            font-size: 14px; /* Slightly smaller font to save space */
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
            white-space: nowrap; /* Prevent button text from wrapping */
        }
        #open-button { 
            background-color: #007bff; 
            color: white; 
            font-weight: bold;
        }
        /* Style for the button when it's disabled/displaying filename */
        #open-button:disabled { 
            background-color: #999; 
            color: #f4f4f9; 
            cursor: not-allowed; 
        }
        #apply-button { background-color: #c7c775; color: black; }
        #save-button { background-color: #28a745; color: white; }
        #save-as-button { background-color: #ffc107; color: #333; }
        #cancel-button { 
            background-color: #dc3545; /* Red for destructive/reset action */
            color: white; 
        }
        #save-button:disabled, #save-as-button:disabled, #cancel-button:disabled, #apply-button:disabled { 
            background-color: #ccc; 
            cursor: not-allowed; 
            color: #666; 
        }
        
        #status-message {
            padding: 5px 10px;
            background-color: #e6f7ff;
            border-left: 5px solid #007bff;
            font-weight: bold;
            font-size: 0.9em;
            margin-left: auto; /* Push status to the right */
        }
        #editor-message {
            position: absolute; 
            top: 50%; 
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            text-align: center;
        }

	#editorDialog { display:grid; grid-template-rows: 65px 1fr; border: none; border-radius: 12px; padding: 0; width: 100%; height: 100% !important; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
	#editorDialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
	#editorDialog .dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 24px; border-bottom: 1px solid #e0e0e0; background: #fff; border-radius: 12px 12px 0 0; }
	#editorDialog .dialog-header h2 { font-size: 20px; font-weight: 600; color: #333; }
	#editorDialog .tabs { display: flex; gap: 4px; padding: 0 24px; background: #fff; border-bottom: 2px solid #e0e0e0; }
	#editorDialog .tab { padding: 12px 24px;padding-bottom:0px; margin-bottom:15px; border: none; background: transparent; color: #666; font-size: 20px; font-weight: 700; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; position: relative; top: 2px; }
	#editorDialog .tab:hover { color: #4285f4; background: #f8fbff; }
	#editorDialog .tab.active { color: #4285f4; border-bottom-color: #4285f4; }
	#editorDialog .dialog-content { display: flex; background: #fff; }
	#editorDialog .canvas-section { flex: 1; display: flex; justify-content: center; align-items: center; padding: 24px; background: #2a2a2a; min-width: 0; position: relative; }
	#editorDialog .canvas-container { position: relative; display: inline-block; }
	#editorDialog #imageCanvas {  box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: block; }
	#editorDialog #overlayCanvas { position: absolute; top: 0; left: 0; pointer-events: none; display: none; }
	#editorDialog #overlayCanvas.active { display: block; }
	#editorDialog .crop-overlay { position: absolute; border: 2px solid #fff; cursor: move; display: none; z-index: 10; box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.5); pointer-events: all; }
	#editorDialog .crop-overlay.active { display: block; }
	#editorDialog .resize-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #4285f4; border-radius: 50%; pointer-events: all; cursor: pointer; }
	#editorDialog .resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
	#editorDialog .resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
	#editorDialog .resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
	#editorDialog .resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
	#editorDialog .resize-handle.n { top: -6px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
	#editorDialog .resize-handle.s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
	#editorDialog .resize-handle.w { top: 50%; left: -6px; transform: translateY(-50%); cursor: w-resize; }
    #editorDialog .resize-handle.e { top: 50%; right: -6px; transform: translateY(-50%); cursor: e-resize; }
	#editorDialog .resize-handle#editorDialog .e { top: 50%; right: -6px; transform: translateY(-50%); cursor: e-resize; }
	#editorDialog .controls-section { width: 200px; height:508px; padding: 24px; background: #f9f9f9; overflow-y: auto; border-left: 1px solid #e0e0e0; }
	#editorDialog .tab-content { display: none; }
	#editorDialog .tab-content.active { display: block; }
	#editorDialog .control-group { margin-bottom: 20px; }
	#editorDialog .control-group h4 { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
	#editorDialog .control-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #555; }
	#editorDialog .control-value { font-weight: 600; color: #4285f4; min-width: 60px; text-align: right; }
	#editorDialog .slider { width: 100%; height: 6px; border-radius: 3px; background: #e0e0e0; outline: none; -webkit-appearance: none; }
	#editorDialog .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #4285f4; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
	#editorDialog .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #4285f4; cursor: pointer; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
	#editorDialog .button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
	#editorDialog .button-grid-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
	#editorDialog .control-btn { padding: 10px 12px; border: 2px solid #e0e0e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #555; transition: all 0.2s; text-align: center; }
	#editorDialog .control-btn:hover { border-color: #4285f4; color: #4285f4; background: #f8fbff; }
	#editorDialog .control-btn.active { background: #4285f4; border-color: #4285f4; color: #fff; }
	#editorDialog .reset-btn { width: 100%; padding: 8px 12px; border: 1px solid #dc3545; background: #fff; color: #dc3545; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; }
	#editorDialog .reset-btn:hover { background: #dc3545; color: #fff; }
	#editorDialog .dialog-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid #e0e0e0; background: #f9f9f9; border-radius: 0 0 12px 12px; }
	#editorDialog .btn { padding: 10px 24px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
	#editorDialog .btn-cancel { background: #ffeaea; border: 2px solid #ddd; }
	#editorDialog .btn-cancel:hover { background: #ffcaca; }
	#editorDialog .btn-apply { background: #fffeea; border: 2px solid #ddd;  }
	#editorDialog .btn-apply:hover { background: #fffeca; }
	#editorDialog .btn-save { background: #eaffea;border: 2px solid #ddd; }
	#editorDialog .btn-disabled {background: #f1e8e8;border: 1px solid #ddd;color: grey;}
	#editorDialog .btn-save:hover { background: #caffca; }
	#editorDialog .test-controls { text-align: center; margin-bottom: 20px; }
	#editorDialog .test-controls input { display: none; }
	#editorDialog .test-controls label { display: inline-block; padding: 12px 24px; background: #4285f4; color: #fff; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
	#editorDialog .test-controls label:hover { background: #357ae8; }
	#editorDialog .accordion-container {margin: 2rem auto;border: 1px solid #ccc;border-radius: 8px; background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
	#editorDialog .accordion-item {border-bottom: 1px solid #eee;}
	#editorDialog .accordion-item:last-child { border-bottom: none;}
	#editorDialog .accordion-header {display: flex;justify-content: flex-end;align-items: center;font-weight: bold;cursor: pointer;background-color: #f7f7f7; user-select: none;}
	#editorDialog .accordion-header:hover {background-color: #e9e9e9;}
	#editorDialog .accordion-content {padding: 0 1rem;overflow: hidden;max-height: 0;transition: max-height 0.3s ease-out;}
	#editorDialog details[open] .accordion-content {max-height: 500px; padding: 1rem;padding-top: 0px;}
	#editorDialog details > summary {list-style: none;}
	#editorDialog details > summary::-webkit-details-marker {display: none;}
	#editorDialog .accordion-header::after {content: '+';transition: transform 0.3s ease-out;font-size: 1.2em;margin-left: 1rem;}
	#editorDialog details[open] .accordion-header::after {content: '−';}