.ge-root { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }

/* Picker */
.ge-picker {
    display: flex; flex-wrap: wrap; gap: 3px;
    max-width: 700px;
    font-family: monospace; font-size: 13px;
}
.ge-picker-cell {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border: 1px solid var(--ge-border, #444);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    color: var(--ge-text, #ccc);
    background: var(--ge-bg-cell, #1e1e1e);
    transition: border-color .1s;
}
.ge-picker-cell { position: relative; }
.ge-picker-cell:hover { border-color: var(--pixel-lit); }
.ge-picker-selected { border-color: var(--pixel-lit) !important; background: var(--ge-bg-sel, #1a0800) !important; }
.ge-picker-edited { border-color: var(--pixel-lit) !important; }
.ge-picker-accepted { border-color: var(--success-outline) !important; }
.ge-picker-accepted::after { content: '✓'; position: absolute; font-size: 8px; color: var(--success-outline); bottom: 0; right: 1px; }

/* 2-col layout: canvas | panel */
.ge-grid { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: start; }

/* Canvas */
.ge-canvas-wrap { display: inline-block; border: 1px solid var(--ge-border, #444); border-radius: 4px; overflow: hidden; cursor: crosshair; }
canvas#ge-canvas { display: block; }

/* Right-side control panel */
.ge-panel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ge-panel-sep { height: 1px; background: var(--ge-border, #444); margin: 4px 0; }
.ge-btn-group { display: flex; flex-wrap: wrap; gap: 4px; }

/* Tool buttons */
.ge-tool-btn {
    padding: 5px 10px; font-size: 13px; cursor: pointer; border-radius: 5px;
    border: 1px solid var(--ge-border, #444);
    background: var(--ge-bg-btn, #2a2a2a);
    color: var(--ge-text, #ccc);
}
.ge-tool-btn:hover { border-color: var(--pixel-lit); }
.ge-tool-btn.active { border-color: var(--pixel-lit); background: var(--ge-bg-sel, #1a0800); color: var(--pixel-lit); }

/* Light theme overrides */
[data-theme="light"] .ge-picker-cell  { --ge-bg-cell: #f4f4f4; --ge-text: #333; --ge-border: #bbb; }
[data-theme="light"] .ge-tool-btn     { --ge-bg-btn: #eee; --ge-text: #333; --ge-border: #bbb; }