#gradModal .dlg-close, #effectsPanel .dlg-close{ background:transparent; border:0; color:var(--muted); font-size:18px; cursor:pointer; padding:4px 8px; border-radius:6px; }
#gradModal .dlg-close:hover, #effectsPanel .dlg-close:hover{ color:var(--text); background:rgba(255,255,255,0.02); }
/* Generalize dialog close button appearance to all dialogs */
.dlg-close{ background:transparent; border:0; color:var(--muted); font-size:18px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.dlg-close:hover{ color:var(--text); background:rgba(255,255,255,0.02); }
/* estilo.css - basic styles for Image Editor V5 */
:root{
	--bg:#2b2b2b;
	--panel:#202225;
	--text:#c0c6cc; /* default text color (dark theme - slightly darker gray) */
	--muted:#9aa4b2;
	--accent:#4f83ff;
	--accent-2:#3a6bff;
	--surface:#161616;
	--input-bg: rgba(255,255,255,0.03);
	--input-border: rgba(255,255,255,0.06);
}

/* Light theme overrides */
.light-theme {
	--bg: #f6f9ff;
	--panel: #ffffff;
	--text: #222222; /* dark text for light theme */
	--muted: #65758a;
	--accent: #0b5cff;
	--accent-2: #2a7bff;
	--surface: #ffffff;
	--input-bg: #ffffff;
	--input-border: #e6eef8;
	color-scheme: light;
}

/* Blue theme: calmer blue background with white panels */
.blue-theme{
	--bg: #eaf4ff;
	--panel: #ffffff;
	--text: #0b2b4a;
	--muted: #4a6b86;
	--accent: #0b72ff;
	--accent-2: #2aa1ff;
	--surface: #f6fbff;
	--input-bg: #ffffff;
	--input-border: #d7e9ff;
	color-scheme: light;
}

.blue-theme .ie-toolbar .btn { color: #0b2b4a; }
.blue-theme .ie-toolbar .btn.primary { color: #ffffff; }

/* Blue theme: darker slider track for better visibility */
.blue-theme input[type=range]{ background: rgba(11,92,180,0.08); -moz-appearance: none; }
.blue-theme input[type=range]::-webkit-slider-runnable-track{ background: linear-gradient(90deg, #0a5edb, #2aa1ff); height:6px; border-radius:6px; }
.blue-theme input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background: var(--accent); border: none; box-shadow:0 1px 3px rgba(0,0,0,0.35); margin-top: -4px; }
.blue-theme input[type=range]::-moz-range-track{ background: linear-gradient(90deg, #0a5edb, #2aa1ff); height:6px; border-radius:6px; }
.blue-theme input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background: var(--accent); border: none; box-shadow:0 1px 3px rgba(0,0,0,0.35); }

/* In light theme, toolbar buttons' text should be dark gray for better contrast */
.light-theme .ie-toolbar .btn { color: #333333; }
.light-theme .ie-toolbar .btn.primary { color: #ffffff; }

body .ie-container{ font-family: Roboto, Arial, sans-serif; color:var(--text); }
.ie-container{ width:95%; max-width:1800px; margin:20px auto; }

/* Toolbar */
.ie-toolbar{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius:8px; }
.ie-toolbar .btn{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:#e6eef8; border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:6px; cursor:pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset; }
.ie-toolbar .btn.primary{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; border-color:rgba(0,0,0,0.25); }

.ie-main{ display:flex; gap:14px; align-items:flex-start; overflow:visible; }

.ie-left-toolbar{ display:none; }

/* New canvas column containing horizontal tools and canvas */
.ie-canvas-column{ flex:1 1 auto; display:flex; flex-direction:column; gap:10px; }
.ie-tools-row{ display:flex; gap:8px; align-items:center; padding:8px; border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.ie-tools-row .btn.tool{ padding:6px; display:inline-flex; gap:0; align-items:center; justify-content:center; font-size:13px; width:40px; height:36px; }
.ie-tools-row .btn.tool i{ font-size:18px; }
.pal-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.pal-row label{ font-size:12px; color:var(--muted); }

/* form control styling */
.palette input[type="text"], .palette input[type="number"], .palette select { width:100%; padding:6px 8px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }
.palette input[type="color"]{ width:48px; height:32px; padding:0; border:0; background:transparent; }
.btn.tool.active{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }

/* Layers list improved visuals */
.layers-list .layer-item{ display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px; border-bottom:1px solid rgba(255,255,255,0.02); }
.layer-controls{ display:flex; gap:6px; align-items:center; }
.layer-controls button{ background:transparent; border:0; color:var(--muted); padding:6px; cursor:pointer; }
.layer-name{ flex:1; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-hidden{ opacity:0.45 }
.layer-locked{ opacity:0.6 }

/* Selected layer highlight */
.layer-item.selected{ background: linear-gradient(90deg, rgba(79,131,255,0.06), rgba(58,107,255,0.03)); border-radius:6px; }

/* Inputs, selects and buttons in panels */
.panel input[type="text"], .panel input[type="number"], .panel select, .panel input[type="color"]{ background:var(--input-bg); border:1px solid var(--input-border); color:var(--text); }
.panel .btn{ background:transparent; border:1px solid var(--input-border); color:var(--text); }
.panel .btn.primary{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; }

/* nicer range styling */
input[type=range]{ -webkit-appearance:none; height:6px; background:rgba(255,255,255,0.03); border-radius:6px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; background:var(--accent); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.4); }

/* layer button styles */
.layer-btn i{ pointer-events:none; }
.layer-btn{ background:transparent; border:0; color:var(--muted); padding:6px; cursor:pointer; border-radius:6px; }
.layer-btn:hover{ background:rgba(255,255,255,0.02); color:#e6eef8; }

/* Canvas area behaves like GIMP central image area */
#ie-canvas-wrap-placeholder
.ie-canvas-wrap{ flex:1 1 auto; background:transparent; position:relative; border:1px solid rgba(255,255,255,0.03); border-radius:6px; padding:0; display:flex; justify-content:flex-start; align-items:flex-start; min-height:320px; overflow:visible; min-width:0; }
.canvas-background{ display:none; }
#editorCanvas{ width:100%; max-width:none; height:auto; max-height:85vh; display:block; background:transparent; z-index:1; border-radius:4px; box-shadow: 0 4px 18px rgba(0,0,0,0.45); margin:0; }

/* Keep canvas preview visible while scrolling: stick the canvas column when possible */
.ie-canvas-column{ position: -webkit-sticky; position: sticky; top:80px; align-self:flex-start; z-index:5; }
.ie-canvas-wrap{ /* ensure the sticky column's inner wrap does not show internal scrollbars */ max-height: calc(100vh - 120px); overflow:visible; }
@media (max-width:900px){ .ie-canvas-column{ position:static; } .ie-canvas-wrap{ max-height:none; } }

/* Sidebar (toolbox) */
.ie-sidebar{ width:300px; min-width:260px; }
.panel{ background:var(--panel); padding:12px; border-radius:8px; margin-bottom:12px; box-shadow: 0 4px 18px rgba(0,0,0,0.45); font-size:13px; }
.panel h3{ display:flex; align-items:center; gap:8px; font-size:15px; margin:0 0 8px 0; color:var(--text); }
.panel h3 i{ color:var(--muted); font-size:16px; }
.layers-list{ max-height:380px; overflow:auto; }
.layer-item{ display:flex; justify-content:space-between; align-items:center; padding:8px; border-bottom:1px solid rgba(255,255,255,0.02); }
.layer-name{ font-size:13px; color:var(--text); }
.layer-actions .btn.small{ padding:4px 6px; font-size:12px; }

.ie-alert{ position:fixed; right:18px; bottom:18px; background:#111827; color:#fff; padding:8px 12px; border-radius:6px; display:none; }
.ie-dialog{ font-size:14px; }

/* Make editor area occupy ~95% width on smaller screens too */

/* Ensure container doesn't cause horizontal page scroll */
*{box-sizing:border-box}
body{margin:0;padding:0;overflow-x:hidden;background:var(--bg);}
@media (max-width:1200px){ .ie-container{ width:95%; } }
@media (max-width:900px){ .ie-sidebar{ display:none; } .ie-toolbar{ flex-wrap:wrap;} #editorCanvas{ max-height:60vh; } }

/* Ensure the page wrapper for the editor doesn't constrain layout unexpectedly */
.tool-container{ max-width: none; padding: 0 20px; }
.tool-container .ie-container{ width:100%; max-width:none; margin:20px auto; }

/* small utilities for named colors earlier reuse */

.small-input{ width:100px; }
.tiny-input{ width:56px; }
.tool-properties h4{ margin:0 0 8px 0; font-size:13px; color:var(--muted); }
.prop-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.text-style .btn.small{ padding:6px 8px; margin-right:6px; }
.text-style .btn.small.active{ background:rgba(255,255,255,0.04); color:#e6eef8; }

/* Alignment buttons: match the visual style of Estilo buttons */
.txtAlign{ padding:6px 8px; margin-right:6px; border-radius:6px; background:transparent; border:1px solid var(--input-border); color:var(--text); cursor:pointer; }
.txtAlign:hover{ background:rgba(255,255,255,0.02); }
.txtAlign.active{ background:rgba(255,255,255,0.04); color:#e6eef8; border-color:rgba(255,255,255,0.08); }

/* Improve textarea styling for text editing */
.prop-row.for-text textarea{ width:100%; resize:vertical; border-radius:6px; padding:8px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); font-size:14px; line-height:1.25; }
.prop-row.for-text textarea:focus{ outline:2px solid rgba(79,131,255,0.12); box-shadow:0 2px 8px rgba(58,107,255,0.06) inset; }

/* inline rename input inside layers list */
.layer-name .layer-rename-input{ width:100%; padding:6px 8px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }


/* Inline property rows: label left, input right */
.prop-row-inline{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.prop-row-inline label{ width:100px; color:var(--muted); }
/* Propriedades inputs rounded and adaptable numeric inputs */
#layerProps input[type="number"], #layerProps input[type="text"], #layerProps select{ border-radius:6px; padding:4px 6px; }
/* Make labels narrower and inputs fill available space */
#layerProps .prop-row-inline label{ width:72px; color:var(--muted); }
#layerProps .prop-row-inline input[type="number"], #layerProps .prop-row-inline input[type="text"], #layerProps .prop-row-inline select{ flex:1; width:auto; min-width:48px; }
/* Ensure numeric inputs don't force a tiny fixed width */
#layerProps input[type="number"]{ width:auto; min-width:48px; }
#layerProps{ display:flex; flex-direction:column; gap:8px; }
#layerProps .prop-row-inline{ display:flex; align-items:center; gap:8px; }
#layerProps .prop-row-inline input[type="range"]{ width:160px; }
#layerProps label{ color:var(--muted); }
/* Tool properties select contrast improvement */
.tool-properties select{ background:linear-gradient(180deg, var(--input-bg), rgba(0,0,0,0.03)); color:var(--text); border:1px solid var(--input-border); padding:8px 10px; border-radius:6px; }
.tool-properties select option{ background:var(--panel); color:var(--text); }
.tool-properties .btn{ font-size:13px; }

/* Make dialog titles draggable via the header (consistent cursor) */
.ie-dialog h3, #gradModal h3{ cursor:move; margin:0 0 8px 0; }
/* increase select padding in panels by ~2px */
.panel select{ padding:8px 10px; }

/* Palette panel layout */
.palette-panel .palette-grid{ display:flex; flex-direction:column; gap:8px; }
.palette-panel .color-pair{ display:flex; justify-content:space-between; align-items:center; }
.palette-panel .hex-row{ display:flex; flex-direction:column; }
.palette-panel .hex-row .hex-input{ width:100%; padding:6px 8px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }
.palette-panel .triple-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.palette-panel input[type="color"]{ height:36px; width:56px; }

/* Color swatches inside color modal */
#colorSwatches{ display:grid; grid-template-columns: repeat(auto-fill, 28px); gap:6px; align-items:center; justify-content:center; }
.sw{ width:26px; height:26px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); cursor:pointer; box-sizing:border-box; }
.sw:hover{ transform:scale(1.06); box-shadow:0 4px 12px rgba(0,0,0,0.18); }
.fav-remove-btn{ margin-left:1px; font-size:11px; padding:2px 6px; border-radius:4px; }

/* Gradient favorite preview (larger swatch showing gradient) */
.grad-fav{ width:56px; height:28px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); cursor:pointer; box-sizing:border-box; display:inline-block; }
.grad-fav:hover{ transform:scale(1.03); box-shadow:0 6px 14px rgba(0,0,0,0.16); }
.grad-fav + .fav-remove-btn{ margin-left:6px; }

/* Brush size display */
.prop-row.for-draw{ display:flex; align-items:center; gap:8px; }
.prop-row.for-draw .brush-value{ min-width:40px; text-align:right; color:var(--muted); }

/* Tool header styles (uses theme colors) */
.tool-header{ margin-bottom:12px; }
.tool-header .tool-title{ font-size:2.5rem; margin:0; color:var(--text); font-weight:800; }
.tool-header .tool-desc{ margin:6px 0 0 0; color:var(--muted); }
.tool-title i{ margin-right:8px; }

@media (max-width: 768px){
	.tool-header .tool-title{ font-size:2rem; }
}

/* Gradient modal compact styling */
#gradModal{ display:none; }
#gradModal .ie-dialog > div, #gradModal > div{ box-sizing:border-box; }
#gradModal > div{ max-width:420px; width:420px; padding:12px; }
#gradModal .stop-row{ display:flex; gap:8px; align-items:center; padding:6px 4px; }
#gradModal .stop-row{ cursor:ew-resize; }
#gradModal .stop-row input[type="color"]{ width:44px; height:28px; padding:0; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); }
#gradModal .stop-row input[type="number"]{ width:56px; padding:6px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }
#gradModal .stop-row button{ padding:6px 8px; border-radius:6px; background:transparent; border:1px solid var(--input-border); color:var(--text); cursor:pointer; }
#gradModal #gradStops{ max-height:160px; overflow:auto; padding-right:6px; }
#gradModal #gradPreview{ width:140px; height:140px; border-radius:6px; border:1px solid var(--input-border); background:transparent; }
#gradModal select, #gradModal input[type="number"], #gradModal .btn{ font-size:13px; }
/* Make dialog footer buttons consistent across all dialogs (match gradiente dialog look) */
.ie-dialog .btn{ padding:6px 10px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }
.ie-dialog .btn.primary{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; }
.ie-dialog .btn:hover{ filter:brightness(1.05); }

@media (max-width:480px){
	#gradModal > div{ width:92%; max-width:92%; }
	#gradModal { padding:12px; }
}

/* Effects panel styling */
#effectsPanel{ display:none; }
#effectsPanel .btn{ padding:6px 8px; border-radius:6px; }
#effectsPanel h3{ cursor:move; margin:0 0 8px 0; }
#effectsPanel label{ display:flex; align-items:center; gap:8px; color:var(--muted); }
#effectsPanel input[type="range"]{ flex:1; }

/* Ensure specific prop rows (opacity / brush size) render on one line:
	Label, numeric input (fixed width to show max value), and slider that fills remaining space */
.no-wrap{ white-space:nowrap; }
#layerProps .prop-row-inline.for-draw input[type="range"],
#layerProps .prop-row-inline input[type="range"]{ flex:1; width:auto; min-width:0; }
#layerProps .prop-row-inline input[type="number"].num-width-3{ width:72px; }
#layerProps .prop-row-inline input[type="number"].num-width-2{ width:56px; }

/* make sure tool-properties panel also respects the one-line layout */
.tool-properties .prop-row-inline input[type="range"]{ flex:1; width:auto; min-width:0; }
.tool-properties .prop-row-inline input[type="number"]{ width:64px; }
/* Make numeric inputs in tool properties match the padding and rounded corners used elsewhere */
.tool-properties input[type="number"]{ padding:6px 8px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }
.num-width-3{ width:72px !important; }

/* Light theme: ensure range track is visible against light background */
.light-theme input[type=range]{ background: rgba(0,0,0,0.06); }
.light-theme input[type=range]::-webkit-slider-runnable-track{ background: rgba(0,0,0,0.06); }
.light-theme input[type=range]::-webkit-slider-thumb{ background:var(--accent); }
.light-theme input[type=range]::-moz-range-track{ background: rgba(0,0,0,0.08); }
.light-theme input[type=range]::-moz-range-thumb{ background:var(--accent); }

/* Font selector styles */
#fontSearch{ box-sizing:border-box; }
#fontSelect{ font-size:14px; }
#fontSelect{ margin-bottom:5px; }
#fontSelect option{ padding:6px; }
#fontSelect optgroup{ font-weight:600; color:var(--muted); }

/* Highlight the selected font option in the font selector (size>1 view) */
#fontSelect option:checked{ background: linear-gradient(180deg,var(--accent),var(--accent-2)); color: #ffffff; }
#fontSelect{ background: var(--input-bg); }

/* Text shadow & outline modals sizing tweaks */
#textShadowModal > div, #textOutlineModal > div{ max-width:480px; width:420px; }
#textShadowModal input[type=range], #textOutlineModal input[type=range]{ flex:1; }
#textShadowModal input[type=number], #textOutlineModal input[type=number]{ padding:6px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }
#textShadowModal select, #textOutlineModal select{ padding:6px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); }