/* Define standard theme colors */
:root {
    --bg-color: #f7f8fc; /* Slightly cooler background */
    --text-color: #24292e; /* Darker text for better contrast */
    --border-color: #d1d5da; /* Softer border color */
    --panel-bg: #ffffff;
    --panel-shadow: rgba(149, 157, 165, 0.15); /* Softer shadow */
    --button-bg: #f6f8fa;
    --button-hover-bg: #f3f4f6;
    --button-border: #d1d5da;
    --active-bg: #e1f5fe; /* Lighter blue for active state */
    --active-border: #81d4fa;
    --active-color: #0277bd;
    --input-border: #ced4da;
    --input-focus-border: #80bdff;
    --input-focus-shadow: rgba(0, 123, 255, 0.2);
    --code-bg: #f1f3f5; /* Slightly different code background */
    --primary-btn-bg: #2ea44f; /* GitHub green */
    --primary-btn-hover-bg: #2c974b;
    --primary-btn-shadow: rgba(46, 164, 79, 0.2);
    --primary-btn-hover-shadow: rgba(46, 164, 79, 0.3);
    --danger-btn-bg: #d73a49; /* GitHub red */
    --danger-btn-hover-bg: #cb2431;
    --save-btn-bg: #0366d6; /* GitHub blue */
    --save-btn-hover-bg: #0361cc;
    --grid-btn-bg: #6f42c1; /* GitHub purple */
    --grid-btn-hover-bg: #653cad;
    --history-btn-bg: #ffc107; /* Amber */
    --history-btn-hover-bg: #f5b700;
    --modal-backdrop: rgba(27, 31, 35, 0.5); /* Darker backdrop */
    --animation-btn-bg: #17a2b8; /* Teal */
    --animation-btn-hover-bg: #138496;
    --section-header-bg: #f1f3f5;
    --section-header-border: #e1e4e8;
    --tool-section-margin: 15px;
    
    /* Consistent spacing variables */
    --spacing-xs: 4px; /* Fine-tuned */
    --spacing-sm: 8px;
    --spacing-md: 16px; /* Fine-tuned */
    --spacing-lg: 24px; /* Fine-tuned */
    --spacing-xl: 32px;
    --border-radius-sm: 3px; /* Sharper radius */
    --border-radius-md: 5px;
    --border-radius-lg: 8px;
    --panel-padding: 16px; /* Standardized */
    --grid-gap: 16px; /* Standardized */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Common system font stack */
    margin: 0;
    padding: var(--spacing-lg);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    font-size: 14px; /* Slightly smaller base font */
    line-height: 1.5;
}

.app-container {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 240px; 
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "toolbox main-content properties"
        "toolbox main-content properties"
        "toolbox code-output code-output";
    gap: var(--grid-gap); 
    height: calc(100vh - 2 * var(--spacing-lg));
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md); 
    background-color: var(--bg-color); /* Give container a base color */
}

/* Common panel styling */
.panel {
    background-color: var(--panel-bg);
    padding: var(--panel-padding);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px var(--panel-shadow); /* Softer shadow */
    overflow: hidden; /* Change default overflow */
    display: flex; 
    flex-direction: column; 
}

.panel.scrollable {
    overflow-y: auto; /* Add this class specifically where needed, like toolbox */
}

.main-content-area {
    grid-area: main-content;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.screen-manager {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--panel-bg); /* Give it panel background */
    box-shadow: 0 1px 3px var(--panel-shadow); /* Give it subtle shadow */
    flex-shrink: 0; 
}

.screen-manager h2 {
    margin: 0;
    font-size: 1em; /* Adjust relative to base */
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-color);
}

#screen-selector {
    flex-grow: 1;
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--input-border);
    outline: none;
    background-color: var(--button-bg);
    color: var(--text-color);
    font-size: 0.9em;
}

/* Update general button style */
button {
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
    color: var(--text-color);
    font-weight: 500;
    padding: 6px 12px; /* Adjusted padding */
    font-size: 0.9em; /* Standardize */
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    line-height: 1.5; /* Ensure consistent line height */
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

button:hover {
    background-color: var(--button-hover-bg);
    border-color: #babbbc; /* Slightly darker border on hover */
    text-decoration: none; /* Remove underline if it appears */
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
    border-color: var(--input-focus-border); 
}

button:active {
    transform: scale(0.98);
    background-color: #e9ecef; /* Slightly darker active state */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Adjustments for specific buttons */
#add-screen-btn,
#rename-screen-btn,
#delete-screen-btn,
#undo-btn,
#redo-btn,
#save-project-btn,
#load-project-btn,
#toggle-grid-btn {
    padding: 5px 8px; /* Slightly smaller padding for icon buttons */
    font-size: 1em; /* Make icons slightly larger relative to text maybe? */
    min-width: 32px; /* Ensure minimum width */
}

/* Primary button style */
button.primary, #add-screen-btn, #generate-code-btn, .image-upload-btn {
    background-color: var(--primary-btn-bg);
    color: white;
    border-color: transparent;
}
button.primary:hover, #add-screen-btn:hover, #generate-code-btn:hover, .image-upload-btn:hover {
    background-color: var(--primary-btn-hover-bg);
}

/* Danger button style */
button.danger, #delete-screen-btn, #delete-element-btn {
    background-color: var(--danger-btn-bg);
    color: white;
    border-color: transparent;
}
button.danger:hover, #delete-screen-btn:hover, #delete-element-btn:hover {
    background-color: var(--danger-btn-hover-bg);
}

/* Save/Load button style */
#save-project-btn, #load-project-btn {
    background-color: var(--save-btn-bg);
    color: white;
    border-color: transparent;
}
#save-project-btn:hover, #load-project-btn:hover {
    background-color: var(--save-btn-hover-bg);
}

/* Grid button style */
#toggle-grid-btn {
    background-color: var(--grid-btn-bg);
    color: white;
    border-color: transparent;
}
#toggle-grid-btn:hover {
    background-color: var(--grid-btn-hover-bg);
}

/* History button style */
#undo-btn, #redo-btn {
    background-color: var(--history-btn-bg);
    color: white;
    border-color: transparent;
}
#undo-btn:hover, #redo-btn:hover {
    background-color: var(--history-btn-hover-bg);
}

/* Animation button style */
#animation-settings-btn {
    background-color: var(--animation-btn-bg);
    color: white;
    border-color: transparent;
    justify-content: flex-start; /* Align text left */
}
#animation-settings-btn:hover {
    background-color: var(--animation-btn-hover-bg);
}

/* Main toolbox styling */
.toolbox {
    grid-area: toolbox;
    /* Inherits .panel */
    gap: var(--spacing-sm);
    position: relative; 
}

.toolbox h2,
.properties-panel h2,
.code-output-area h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1.1em;
    font-weight: 600; 
    color: var(--text-color);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    /* position: sticky; */ /* Remove sticky for now, requires parent height */
    /* top: 0; */
    /* background-color: var(--panel-bg); */ /* Handled by panel */
    /* z-index: 5; */
    flex-shrink: 0; 
}

/* Tool sections styling */
.tool-section {
    margin-bottom: var(--tool-section-margin);
}

.tool-section h3 {
    margin: 0 0 var(--spacing-sm) 0; /* Added bottom margin */
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9em;
    font-weight: 600;
    background-color: var(--section-header-bg);
    border: 1px solid var(--section-header-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* position: sticky; */ /* Sticky causes issues without defined scroll parent height */
    /* top: calc(40px + var(--spacing-md)); */
    /* z-index: 4; */
}

.tool-section h3 i {
    opacity: 0.7;
}

.tool-section .tool-item {
    margin-top: var(--spacing-xs);
    width: 100%;
    box-sizing: border-box;
}

.tool-item {
    /* Inherits button styles */
    text-align: left;
    justify-content: flex-start; /* Align icon/text to left */
    width: 100%; 
    margin-bottom: var(--spacing-xs); /* Space between tool items */
}

.tool-item i {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.tool-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px var(--panel-shadow);
    background-color: var(--button-hover-bg);
}

.tool-item.active {
    background-color: var(--active-bg);
    border: 1px solid var(--active-border);
    font-weight: bold;
    color: var(--active-color);
    box-shadow: 0 1px 3px var(--panel-shadow);
}

/* Image upload container in toolbox */
.toolbox .image-upload-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--panel-bg);
    border: 1px solid var(--button-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    width: 100%;
    box-sizing: border-box;
}

.toolbox .image-upload-label {
    /* Style as regular text label */
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    cursor: default;
}

.toolbox #image-upload-input {
    width: 100%;
    font-size: 0.8em;
    max-width: 100%;
    overflow: hidden;
}

/* Style for custom file input button */
.image-upload-btn {
    /* Style as a standard button */
    font-size: 0.9em;
    padding: 6px 12px;
    width: auto; /* Don't force full width */
}

.image-upload-btn:hover {
    background-color: var(--button-hover-bg);
}

.image-upload-btn i {
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

/* Brush controls wrapper - ensures proper positioning */
.brush-controls-wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    order: 9999;
}

/* Brush size controls */
.brush-size-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    position: relative;
    z-index: 100;
    max-width: 100%;
    box-sizing: border-box;
    left: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.brush-size-controls label {
    font-size: 0.85em;
    margin-right: 5px;
    white-space: nowrap;
}

.brush-size-controls input[type="range"] {
    flex: 1;
    margin: 0 5px;
    width: 70px;
    max-width: 100%;
    -webkit-appearance: none;
    height: 5px;
    border-radius: 3px;
    background: #d7dcdf;
    outline: none;
}

.brush-size-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2196F3;
    cursor: pointer;
    border: none;
}

.brush-size-controls span {
    font-size: 0.85em;
    font-weight: bold;
    min-width: 15px;
    text-align: center;
}

/* Style for image upload */
.image-upload-container {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
.image-upload-label {
    font-size: 0.9em;
}
#image-upload-input {
    font-size: 0.8em;
    max-width: 150px;
}

.design-area-container {
    /* Inherits .panel styles */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; 
    min-height: 0; 
    position: relative; 
    padding: var(--spacing-sm); /* Less padding than other panels */
}

/* Adjust H2 inside the design panel */
.design-area-container > h2 {
    font-size: 1.0em; 
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0; 
    padding: var(--spacing-xs) 0; /* Less vertical padding */
    text-align: center;
    width: 100%;
    border-bottom: 1px solid var(--border-color); 
    flex-shrink: 0; 
}

.design-area-container > h2 > .design-tips {
    display: block; 
    font-size: 0.75em;
    font-weight: normal;
    color: #757575; 
    font-style: italic;
    margin-top: 4px; /* Slightly less margin */
    text-align: center;
}

#oled-display {
    position: relative; 
    width: 512px;
    height: 256px;
    background-color: #1c1c1c; /* Slightly off-black */
    border: 1px solid #333; /* Darker border */
    transform-origin: center; 
    box-shadow: 0 0 10px rgba(0, 200, 200, 0.2); /* Subtle cyan glow */
    overflow: hidden; 
    margin-top: var(--spacing-sm); /* Add space below title */
    flex-shrink: 0; /* Prevent shrinking */
}

#pixel-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    z-index: 1;
}

#grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    z-index: 2;
    pointer-events: none;
    display: none;
}

/* Style for elements added to the display */
.display-element {
    position: absolute;
    box-sizing: border-box;
    color: white;
    font-family: monospace;
    font-size: 8px;
    line-height: 1;
    user-select: none;
    z-index: 10;
}

.display-element.text-element {
    border: none;
}

/* Resize handles for vector elements */
.resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: rgba(0, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    z-index: 10;
}

/* Adjust handle positions for smaller size */
.resize-handle.nw { top: -4px; left: -4px; cursor: nwse-resize; }
.resize-handle.ne { top: -4px; right: -4px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.resize-handle.se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.resize-handle.n  { top: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.s  { bottom: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.w  { top: 50%; left: -4px; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.e  { top: 50%; right: -4px; transform: translateY(-50%); cursor: ew-resize; }

/* Rotation handle */
.rotation-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: rgba(255, 165, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    top: -18px;
    right: -18px;
    z-index: 15;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M19,10 C19,14.9705627 14.9705627,19 10,19 C5.02943725,19 1,14.9705627 1,10 C1,5.02943725 5.02943725,1 10,1 C11,1 12,1.15 13,1.5 L13,1 L16,3 L13,5 L13,4.5 C12,4.15 11,4 10,4 C6.6862915,4 4,6.6862915 4,10 C4,13.3137085 6.6862915,16 10,16 C13.3137085,16 16,13.3137085 16,10 L19,10 Z' fill='%23FFA500' stroke='%23ffffff' stroke-width='1px'/></svg>") 10 10, alias;
}

.properties-panel {
    grid-area: properties;
    /* Inherits .panel styles */
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 260px;
    box-sizing: border-box;
}

/* Styles for Tabs within Panels */
.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin: 0 calc(-1 * var(--panel-padding)); /* Extend border to panel edges */
    padding: 0 var(--panel-padding); /* Add padding back */
    margin-bottom: var(--spacing-md);
    flex-shrink: 0; /* Prevent tabs from shrinking */
}

.panel-tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none; 
    border-bottom: 3px solid transparent; /* Space for active indicator */
    background-color: transparent;
    cursor: pointer;
    font-size: 0.95em;
    color: #586069; /* Slightly muted color */
    transition: border-color 0.2s ease, color 0.2s ease;
    margin-bottom: -1px; /* Overlap container border */
    position: relative;
}

.panel-tab-btn:hover {
    color: var(--text-color);
    background-color: transparent; /* No bg change on hover */
    border-bottom-color: #e1e4e8; /* Subtle hover indicator */
}

.panel-tab-btn.active {
    color: var(--text-color);
    font-weight: 600;
    border-bottom-color: var(--save-btn-bg); /* Use a theme color for active */
}

/* Container for tab content */
.panel-tab-content-area {
    flex-grow: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.panel-tab-content {
    display: none; /* Hide content by default */
    height: 100%; /* Ensure content tries to fill the area */
}

.panel-tab-content.active {
    display: block; /* Show active content */
}

#properties-content {
    /* flex: 1; */ /* Flex handled by parent now */
    /* overflow-y: auto; */ /* Scrolling handled by parent now */
    /* ... keep other specific styles for properties-content ... */
    padding-bottom: var(--spacing-sm); 
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); 
}

#layers-content {
     /* Style for the layers list container */
    padding: var(--spacing-xs); /* Minimal padding */
}

#layers-content p { /* Placeholder text style */
    color: #6a737d;
    font-style: italic;
    font-size: 0.9em;
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* Style for individual layer items (will be added by JS) */
.layer-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: 2px;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-size: 0.9em;
}

.layer-item:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--border-color);
}

.layer-item.selected {
    background-color: var(--active-bg);
    border-color: var(--active-border);
    font-weight: 500;
    color: var(--active-color);
}

.layer-item i { /* Icon for element type */
    margin-right: var(--spacing-sm);
    width: 16px;
    text-align: center;
    opacity: 0.7;
}

.layer-item span { /* Element ID or name */
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-output-area {
    grid-area: code-output;
    /* Inherits .panel styles */
    gap: var(--spacing-sm);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease, border 0.3s ease, margin 0.3s ease; /* Added margin */
    overflow: hidden;
    max-height: 300px; 
}

.code-output-area.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    margin-top: calc(-1 * var(--spacing-md)); /* Pull up to reduce gap when collapsed */
    pointer-events: none;
    box-shadow: none; /* Hide shadow when collapsed */
}

.code-options {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--code-bg);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.code-options label {
    margin-right: 5px;
    font-weight: 500;
}

#generate-code-btn {
    /* Now inherits primary style, can add specific margins if needed */
     margin-top: var(--spacing-sm); /* Ensure some space above */
}

#code-output {
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* Better mono font stack */
    font-size: 0.85em; /* Slightly smaller code font */
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-sm);
    resize: vertical;
    padding: var(--spacing-sm);
    background-color: var(--code-bg);
    color: var(--text-color);
    min-height: 100px; /* Reduced min-height */
    line-height: 1.4;
}

.design-tips {
    font-size: 0.7em;
    font-weight: normal;
    color: #757575;
    font-style: italic;
    margin-left: 8px;
}

/* Shape Library Styles */
.shape-library-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e1e4e8;
    animation: slideInUp 0.3s ease;
}

.shape-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
}

.shape-library-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #333;
}

.shape-library-close {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #666;
    padding: 0 5px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.shape-library-close:hover {
    transform: rotate(90deg);
    opacity: 1;
}

.shape-library-tabs {
    display: flex;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 5px;
}

.shape-library-tab {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 0.9em;
    color: #555;
    position: relative;
    transition: color 0.2s;
}

.shape-library-tab:hover {
    color: #2196F3;
}

.shape-library-tab.active {
    color: #2196F3;
    font-weight: 500;
}

.shape-library-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #2196F3;
}

.shape-library-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 12px;
    padding-bottom: 15px;
}

.shape-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #eaeaea;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.shape-item:hover {
    transform: translateY(-3px) scale(1.03);
    background-color: #e3f2fd;
    border-color: #90caf9;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.shape-preview {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.shape-preview img,
.shape-preview svg {
    max-width: 100%;
    max-height: 100%;
}

.shape-name {
    font-size: 0.8em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: #555;
}

.shape-library-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease;
}

/* Animation Settings Styles */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease;
}

.animation-settings-popup {
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.2);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e4e8;
    animation: slideInUp 0.3s ease;
}

.animation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
}

.animation-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #333;
}

.animation-close {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.animation-close:hover {
    transform: rotate(90deg);
    opacity: 1;
}

.animation-content {
    padding: 20px;
    overflow-y: auto;
}

.animation-global-settings,
.screen-transitions {
    background-color: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.animation-global-settings h4,
.screen-transitions h4 {
     margin-top: 0;
    margin-bottom: 15px;
     font-size: 1.1em;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #eaeaea;
}

.setting-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.setting-row:last-child {
    margin-bottom: 0;
}

.setting-row label {
    flex: 0 0 120px;
    font-size: 0.9em;
    color: #555;
}

.setting-row input[type="number"],
.setting-row select {
    width: 100px;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    outline: none;
}

.setting-row input[type="number"]:focus,
.setting-row select:focus {
    border-color: #4d90fe;
    box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
}

.setting-row input[type="checkbox"] {
    width: auto;
    height: 18px;
    width: 18px;
}

.transition-selector {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: #f0f0f0;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e1e4e8;
}

.transition-selector label {
    margin-right: 8px;
    font-size: 0.9em;
    color: #555;
}

.transition-selector select {
    flex: 1;
    margin-right: 10px;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    outline: none;
}

.transition-selector select:focus {
    border-color: #4d90fe;
    box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
}

.transition-settings {
    background-color: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.transition-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.transition-buttons button {
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

#save-transition-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
}

#save-transition-btn:hover {
    background-color: #45a049;
}

#delete-transition-btn {
    background-color: #f44336;
    color: white;
    border: none;
}

#delete-transition-btn:hover {
    background-color: #d32f2f;
}

.animation-preview-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 15px;
}

.animation-preview-container label {
    margin-bottom: 8px;
    font-weight: 500;
}

#animation-preview {
    width: 256px;
    height: 128px;
    border: 1px solid #333;
    background-color: #000;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

#preview-animation-btn {
    background-color: #2196F3;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    margin-top: 8px;
}

#preview-animation-btn:hover {
    background-color: #1e88e5;
}

/* Style the code toggle button */
.code-toggle-btn {
    /* Put back absolute positioning relative to design-area-container */
    position: absolute;
    right: var(--spacing-sm); /* Position near bottom-right */
    bottom: var(--spacing-sm);
    z-index: 20; /* Ensure it's above oled display and elements */

    /* Apply standard button theme (e.g., save theme) */
    background-color: var(--save-btn-bg);
    color: white;
    border-color: transparent;
    /* Inherits padding, border-radius, etc. from base button */
    /* Remove margin and align-self */
    /* margin-top: var(--spacing-md); */ 
    /* align-self: center; */ 
}

.code-toggle-btn:hover {
    background-color: var(--save-btn-hover-bg);
}

/* Media queries for responsive design */
@media (max-width: 1200px) {
    .app-container {
        grid-template-columns: 180px minmax(0, 1fr) 200px;
        gap: var(--spacing-md);
    }
    
    .tool-section {
        margin-bottom: var(--spacing-md);
    }
    
    .tool-item, .tool-section h3 {
        font-size: 0.85em;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .oled-display {
        width: 480px;
        height: 240px;
    }
    
    #pixel-canvas, #grid-canvas {
        transform: scale(3.75);
    }
}

@media (max-width: 900px) {
    .app-container {
        grid-template-columns: 150px minmax(0, 1fr) 180px;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .design-area-container, 
    .toolbox, 
    .properties-panel, 
    .code-output-area {
        padding: var(--spacing-sm);
    }
    
    .tool-section {
        margin-bottom: var(--spacing-sm);
    }
    
    .tool-item {
        padding: 4px 6px;
        font-size: 0.8em;
        gap: 4px;
    }
    
    .tool-section h3 {
        font-size: 0.8em;
        padding: 4px 6px;
    }
    
    .image-upload-btn {
        font-size: 0.8em;
        padding: 3px 5px;
    }
    
    .tool-item i {
        width: 14px;
        font-size: 0.9em;
    }
    
    .oled-display {
        width: 384px;
        height: 192px;
    }
    
    #pixel-canvas, #grid-canvas {
        transform: scale(3);
    }

    /* Further simplify upload section */
    .toolbox .image-upload-container {
        padding: 6px;
    }
    
    .toolbox .image-upload-label {
        margin-bottom: 4px;
    }
    
    .image-upload-btn i {
        margin-right: 2px;
    }

    .code-output-area {
        max-height: 250px;
    }
    
    .code-output-area.collapsed + .main-content-area,
    .code-output-area.collapsed ~ .main-content-area {
        height: calc(100% + 250px);
    }
    
    .code-toggle-btn {
        padding: 4px 10px;
        font-size: 0.8em;
    }
    
    .code-toggle-btn i {
        font-size: 12px;
        margin-right: 4px;
    }
}

@media (max-width: 700px) {
    .app-container {
        grid-template-columns: 120px minmax(0, 1fr) 160px;
    }
    
    .tool-item span {
        font-size: 0.9em;
    }
    
    .toolbox h2, 
    .properties-panel h2,
    .code-output-area h2 {
        font-size: 0.95em;
    }
    
    .oled-display {
        width: 320px;
        height: 160px;
    }
    
    #pixel-canvas, #grid-canvas {
        transform: scale(2.5);
    }
}

@media (max-width: 600px) {
    .app-container {
        grid-template-columns: 100px minmax(0, 1fr) 140px;
        gap: 8px;
        padding: 8px;
    }
    
    body {
        padding: 8px;
    }
    
    .toolbox {
        padding: 8px 6px;
    }
    
    .tool-item, .image-upload-btn {
        padding: 3px 4px;
    }
    
    .oled-display {
        width: 256px;
        height: 128px;
    }
    
    #pixel-canvas, #grid-canvas {
        transform: scale(2);
    }
    
    .code-toggle-btn {
        padding: 3px 8px;
        font-size: 0.75em;
        right: 5px;
        bottom: 5px;
    }
    
    .code-toggle-btn i {
        font-size: 11px;
        margin-right: 3px;
    }
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* Style scrollbars */
.panel.scrollable::-webkit-scrollbar {
    width: 6px;
}
.panel.scrollable::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
}
.panel.scrollable::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
}
.panel.scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.35);
}

/* Layers Panel Styles */
.layers-panel-content {
    padding: var(--spacing-sm);
    max-height: 300px; /* Or whatever height fits your layout */
    overflow-y: auto;
}

.layer-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    background-color: var(--panel-bg-secondary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: 1px solid var(--border-color-light);
}

.layer-item:hover {
    background-color: var(--panel-bg-hover);
}

.layer-item.selected {
    background-color: var(--accent-color-secondary-transparent);
    border-left: 3px solid var(--accent-color-secondary);
    font-weight: 500;
}

.layer-item i {
    margin-right: var(--spacing-sm);
    color: var(--text-color-secondary);
    width: 16px; /* Ensure consistent icon spacing */
    text-align: center;
}

.layer-item.selected i {
    color: var(--accent-color-secondary);
}

/* Drag and Drop Styles for Layers */
.layer-item.dragging {
    opacity: 0.6;
    background-color: var(--accent-color-faded) !important; /* Use important to override hover */
    border: 1px dashed var(--accent-color);
}

.layer-item.drag-over-target {
    background-color: var(--accent-color-faded) !important;
    outline: 2px dashed var(--accent-color-secondary);
    outline-offset: -2px;
}

/* Ensure panel tab content is hidden by default if not active */

/* Properties Form Improved Styles */
.properties-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    box-sizing: border-box;
    padding-bottom: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.form-group label {
    font-size: 0.9em;
    margin-bottom: 3px;
    color: var(--text-color);
    font-weight: 500;
}

.form-group .form-control {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-sm);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-group .form-control:focus {
    border-color: var(--input-focus-border);
    outline: none;
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

.form-group input[type="checkbox"] {
    margin-right: 6px;
    vertical-align: middle;
}

.form-group small.form-help {
    font-size: 0.75em;
    color: #6c757d;
    margin-top: 2px;
    font-style: italic;
}

.form-group .form-value {
    padding: 6px 0;
    color: var(--text-color);
}

.checkbox-group {
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
}

/* Font preview dropdown specific styles */
.font-preview-select {
    font-size: 1em;
    max-width: 100%;
}

.font-preview-select option {
    padding: 8px;
    font-size: 0.95em;
}

/* Alignment section styles */
.alignment-section {
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.alignment-section h4 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 0.95em;
    font-weight: 600;
}

.alignment-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.align-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 32px;
    padding: var(--spacing-xs);
}

.form-actions {
    margin-top: var(--spacing-md);
}