/* Prismatik Theme CSS */
/* This file controls the default styling for all Prismatik components */

/* ===== SIMPLE: PREVENT WHITE FLASH ===== */
/* Just ensure body has dark background */
body {
    background-color: hsl(var(--prismatik-base-100));
    color: hsl(var(--prismatik-base-content));
    margin: 0;
    padding: 0;
}

/* ===== DEFAULT THEME (Prevents FOUC) ===== */
:root {
    /* Prismatik Dark Theme - Default to prevent white flash */
    --prismatik-primary: 259 94% 51%;
    --prismatik-primary-content: 0 0% 100%;
    --prismatik-secondary: 314 100% 47%;
    --prismatik-secondary-content: 0 0% 100%;
    --prismatik-accent: 174 60% 51%;
    --prismatik-accent-content: 0 0% 100%;
    --prismatik-neutral: 219 14% 28%;
    --prismatik-neutral-content: 0 0% 100%;
    --prismatik-base-100: 222 84% 5%;
    --prismatik-base-200: 215 28% 17%;
    --prismatik-base-300: 216 12% 84%;
    --prismatik-base-content: 210 20% 98%;
    --prismatik-info: 199 89% 48%;
    --prismatik-info-content: 0 0% 100%;
    --prismatik-success: 142 76% 36%;
    --prismatik-success-content: 0 0% 100%;
    --prismatik-warning: 38 92% 50%;
    --prismatik-warning-content: 0 0% 100%;
    --prismatik-error: 0 84% 60%;
    --prismatik-error-content: 0 0% 100%;
    
    /* Window styling */
    --prismatik-window-bg: var(--prismatik-base-200);
    --prismatik-window-border: var(--prismatik-base-300);
    --prismatik-window-header-bg: var(--prismatik-base-200);
    --prismatik-window-header-border: var(--prismatik-base-300);
    
    /* Spacing and sizing */
    --prismatik-border-radius: 0.5rem;
    --prismatik-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --prismatik-tool-size: 40px;
    --prismatik-window-padding: 8px;
    --prismatik-window-header-padding: 4px;
}

/* Simple: Just ensure Tailwind classes work with our theme */
.bg-base-100 {
    background-color: hsl(var(--prismatik-base-100));
}

.bg-base-200 {
    background-color: hsl(var(--prismatik-base-200));
}

.bg-base-300 {
    background-color: hsl(var(--prismatik-base-300));
}

.text-base-content {
    color: hsl(var(--prismatik-base-content));
}

.border-base-300 {
    border-color: hsl(var(--prismatik-base-300));
}

/* ===== WINDOW COMPONENTS ===== */
.prismatik-window.window {
    background-color: hsl(var(--prismatik-window-bg));
    border: 1px solid hsl(var(--prismatik-window-border));
    border-radius: var(--prismatik-border-radius);
    box-shadow: var(--prismatik-shadow-lg);
    position: absolute;
    z-index: 1000;
    min-width: 120px;
    min-height: 150px;
    transition: all 0.2s ease;
}

.prismatik-window.window.active-window {
    border-color: hsl(var(--prismatik-primary));
    box-shadow: var(--prismatik-shadow-lg), 0 0 0 1px hsl(var(--prismatik-primary) / 0.3);
}

.window-header {
    background-color: hsl(var(--prismatik-window-header-bg));
    border-bottom: 1px solid hsl(var(--prismatik-window-header-border));
    padding: 0.2rem 0.4rem;
    border-radius: var(--prismatik-border-radius) var(--prismatik-border-radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: move;
    user-select: none;
}

.window-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--prismatik-base-content));
    flex: 1;
    margin: 0;
}

.window-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}



.window-content {
    padding: 0.1rem;
    height: calc(100% - 40px);
    overflow: auto;
}

/* ===== TOOL PALETTE ===== */
.tool-palette {
    padding: 0;
    display: grid;
    gap: var(--prismatik-tool-gap);
    overflow: hidden;
    height: 100%;
}

.tool-button {
    width: var(--prismatik-tool-size);
    height: var(--prismatik-tool-size);
    border-radius: var(--prismatik-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    border: 1px solid hsl(var(--prismatik-tool-button-border));
    background-color: hsl(var(--prismatik-tool-button-bg));
}

.tool-button:hover {
    background-color: hsl(var(--prismatik-tool-button-hover));
    transform: scale(1.05);
    border-color: hsl(var(--prismatik-base-content) / 0.4);
}

.tool-button.active {
    background-color: hsl(var(--prismatik-tool-button-active));
    color: hsl(var(--prismatik-tool-button-active-content));
    box-shadow: var(--prismatik-shadow);
    transform: scale(1.05);
    border-color: hsl(var(--prismatik-tool-button-active));
}

.tool-button:active {
    transform: scale(0.95);
}

/* Tool palette window specific styles */
#tool-palette-window .window-content {
    overflow: hidden !important;
    padding: 4px !important;
}

#tool-palette-window .window-header {
    padding-left: 3px !important;
}

/* Layers window specific styles */
#layers-window .window-content {
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ===== PROPERTIES PANEL ===== */
.properties-panel {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.property-control {
    margin-bottom: 0.25rem;
}

.property-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.property-control .label {
    padding: 0.25rem 0;
}

.property-control .label-text {
    font-size: 0.75rem;
}

.property-control .label-text-alt {
    font-size: 0.75rem;
}

/* ===== LAYERS PANEL ===== */
.layers-panel {
    padding: 0.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

/* ===== MODAL SYSTEM ===== */
#modal-overlay {
    backdrop-filter: blur(2px);
}

#modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    position: relative;
}

.modal-footer {
    background: var(--prismatik-base-200);
}

.layer-item {
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.125rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
}

.layer-item:hover {
    background-color: hsl(var(--b2));
}

.layer-item.active {
    background-color: hsl(var(--p) / 0.2);
    border: 1px solid hsl(var(--p));
}

.layer-item .toggle {
    width: 1rem;
    height: 0.5rem;
}

.layer-item .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* ===== CANVAS AREA ===== */
.canvas-container {
    position: relative;
    background-color: hsl(var(--prismatik-canvas-bg));
    flex: 1;
    overflow: hidden;
}

.canvas {
    border: 1px solid hsl(var(--prismatik-canvas-border));
    display: block;
    margin: auto;
    cursor: crosshair;
}

.canvas-container .welcome-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--prismatik-window-bg));
    z-index: 10;
}

.navbar{
    min-height: 3rem !important;
}

/* ===== NAVBAR DROPDOWNS ===== */
.dropdown-content {
    z-index: 9999;
}

/* ===== CUSTOM SCROLLBARS ===== */
.window-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.window-content::-webkit-scrollbar-track {
    background-color: hsl(var(--b2));
    border-radius: 3px;
}

.window-content::-webkit-scrollbar-thumb {
    background-color: hsl(var(--b3));
    border-radius: 3px;
}

.window-content::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--bc) / 0.3);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .window {
        min-width: 150px;
        min-height: 100px;
    }
    
    .tool-button {
        width: 28px;
        height: 28px;
    }
    
    .property-panel {
        padding: 0.25rem;
        gap: 0.25rem;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.window {
    animation: fadeIn 0.2s ease-out;
}

.tool-button {
    animation: fadeIn 0.1s ease-out;
}

/* ===== FOCUS STATES ===== */
.tool-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--p) / 0.5);
}



/* ===== DRAGGING STATES ===== */
.window.dragging {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    transform: rotate(1deg);
}

.window.resizing {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
}

/* ===== THEME VARIABLES ===== */
:root {
    /* Prismatik Custom Colors - Override these to customize the theme */
    --prismatik-primary: 259 94% 51%; /* Primary color (HSL) */
    --prismatik-primary-content: 0 0% 100%; /* Primary text color */
    --prismatik-secondary: 314 100% 47%; /* Secondary color */
    --prismatik-secondary-content: 0 0% 100%; /* Secondary text color */
    --prismatik-accent: 174 60% 51%; /* Accent color */
    --prismatik-accent-content: 0 0% 100%; /* Accent text color */
    --prismatik-neutral: 219 14% 28%; /* Neutral color */
    --prismatik-neutral-content: 0 0% 100%; /* Neutral text color */
    --prismatik-base-100: 0 0% 100%; /* Base background */
    --prismatik-base-200: 210 20% 98%; /* Base 200 */
    --prismatik-base-300: 216 12% 84%; /* Base 300 */
    
    /* Tailwind CSS compatibility classes */
    .border-base-300 {
        border-color: hsl(var(--prismatik-base-300));
    }
    
    .bg-base-200 {
        background-color: hsl(var(--prismatik-base-200));
    }
    
    .bg-base-300 {
        background-color: hsl(var(--prismatik-base-300));
    }
    
    
    .text-base-content {
        color: hsl(var(--prismatik-base-content));
    }
    --prismatik-base-content: 215 28% 17%; /* Base text color */
    --prismatik-info: 199 89% 48%; /* Info color */
    --prismatik-info-content: 0 0% 100%; /* Info text color */
    --prismatik-success: 142 76% 36%; /* Success color */
    --prismatik-success-content: 0 0% 100%; /* Success text color */
    --prismatik-warning: 38 92% 50%; /* Warning color */
    --prismatik-warning-content: 0 0% 100%; /* Warning text color */
    --prismatik-error: 0 84% 60%; /* Error color */
    --prismatik-error-content: 0 0% 100%; /* Error text color */
    
    /* Component-specific colors */
    --prismatik-window-bg: var(--prismatik-base-100);
    --prismatik-window-border: var(--prismatik-base-content) / 0.2;
    --prismatik-window-header-bg: var(--prismatik-base-200) / 0.5;
    --prismatik-window-header-border: var(--prismatik-base-content) / 0.2;
    --prismatik-tool-button-bg: var(--prismatik-base-100);
    --prismatik-tool-button-border: var(--prismatik-base-content) / 0.2;
    --prismatik-tool-button-hover: var(--prismatik-base-200);
    --prismatik-tool-button-active: var(--prismatik-primary);
    --prismatik-tool-button-active-content: var(--prismatik-primary-content);
    --prismatik-canvas-bg: var(--prismatik-base-300);
    --prismatik-canvas-border: var(--prismatik-base-content) / 0.2;
    --prismatik-image-window-bg: var(--prismatik-base-100);
    --prismatik-image-window-border: var(--prismatik-base-content) / 0.3;
    --prismatik-image-window-content-bg: #f8f9fa;
    
    /* Layout variables */
    --prismatik-tool-size: 32px;
    --prismatik-tool-gap: 2px;
    --prismatik-window-padding: 8px;
    --prismatik-border-radius: 6px;
    --prismatik-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --prismatik-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --prismatik-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}



/* ===== CONTEXT MENUS ===== */
.context-menu {
    background-color: hsl(var(--b1));
    border: 1px solid hsl(var(--bc) / 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    padding: 0.5rem;
    position: absolute;
    z-index: 1000;
    min-width: 150px;
}

.context-menu-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.context-menu-item:hover {
    background-color: hsl(var(--b2));
}

.context-menu-separator {
    border-top: 1px solid hsl(var(--bc) / 0.2);
    margin: 0.25rem 0;
}

/* ===== LOADING SYSTEM ===== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid hsl(var(--bc) / 0.2);
    border-radius: 50%;
    border-top-color: hsl(var(--p));
    animation: spin 1s ease-in-out infinite;
}

.loading-spinner.small {
    width: 16px;
    height: 16px;
    border-width: 1.5px;
}

.loading-spinner.large {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsl(var(--b1) / 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: inherit;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--bc));
}

.loading-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.loading-window {
    position: relative;
}

.loading-window .window-content {
    position: relative;
}

.loading-window .loading-overlay {
    border-radius: 0 0 0.5rem 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ===== UTILITY CLASSES ===== */
.prismatik-tool-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 1), 1fr);
    gap: var(--prismatik-tool-gap);
}

.prismatik-compact {
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.prismatik-spacing-tight {
    padding: 0.25rem;
}

.prismatik-spacing-normal {
    padding: 0.5rem;
}

.prismatik-spacing-loose {
    padding: 1rem;
}

/* ===== IMAGE WINDOW ===== */
.image-window {
    background-color: hsl(var(--prismatik-image-window-bg));
    border: 1px solid hsl(var(--prismatik-image-window-border));
    border-radius: var(--prismatik-border-radius);
    box-shadow: var(--prismatik-shadow-lg);
    position: absolute;
    z-index: 1000;
    min-width: 200px;
    min-height: 150px;
    resize: both;
    overflow: hidden;
}

.image-window-header {
    background-color: hsl(var(--prismatik-window-header-bg));
    border-bottom: 1px solid hsl(var(--prismatik-window-header-border));
    padding: 0.125rem 0.25rem;
    border-radius: var(--prismatik-border-radius) var(--prismatik-border-radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: move;
    user-select: none;
    min-height: 24px;
}

.image-window-title {
    font-size: 0.625rem;
    font-weight: 500;
    color: hsl(var(--prismatik-base-content));
    flex: 1;
    margin: 0;
}

.image-window-content {
    padding: 0;
    margin: 0;
    height: calc(100% - 24px);
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--prismatik-image-window-content-bg);
    border-radius: 0;
    position: relative;
    width: 100%;
}

.image-window canvas {
    border: 1px solid hsl(var(--prismatik-canvas-border));
    border-radius: 4px;
    cursor: crosshair;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    /* Removed max-width, max-height, object-fit, width, height to allow transform scaling */
}

.image-window img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
}

.resize-handle{
    width: 12px;
    height: 12px;
}

/* V2 UI Components */
#tool-palette-container {
    /* Remove background - let window handle styling */
    background: transparent;
}

#layers-panel-container {
    /* Remove background - let window handle styling */
    background: transparent;
}

.tool-palette {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tool-button {
    background: hsl(var(--b2));
    border: 1px solid hsl(var(--bc) / 0.2);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.tool-button:hover {
    background: hsl(var(--b3));
}

.tool-button.active {
    background: hsl(var(--p));
    color: hsl(var(--pc));
    border-color: hsl(var(--p));
}

.layers-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.layers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid hsl(var(--bc) / 0.2);
}

.layers-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.layer-actions {
    display: flex;
    gap: 4px;
}

.layers-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.layers-actions {
    flex-shrink: 0;
    margin-top: auto;
}

.expand-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.expand-arrow.expanded {
    transform: rotate(90deg);
}



.layer-item:hover {
    background: hsl(var(--prismatik-base-200));
}

.layer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.layer-controls {
    display: flex;
    gap: 2px;
}

.layer-item.active{
    background: hsl(var(--prismatik-primary) / 0.2);
    border: 2px solid hsl(var(--prismatik-primary));
    box-shadow: 0 0 0 1px hsl(var(--prismatik-primary) / 0.3);
}



/* ===== THEME PRESETS ===== */
/* Uncomment one of these to use a preset theme, or create your own! */

/* Dark Theme (Default) */
:root {
    --prismatik-primary: 259 94% 51%;
    --prismatik-primary-content: 0 0% 100%;
    --prismatik-secondary: 314 100% 47%;
    --prismatik-secondary-content: 0 0% 100%;
    --prismatik-accent: 174 60% 51%;
    --prismatik-accent-content: 0 0% 100%;
    --prismatik-neutral: 219 14% 28%;
    --prismatik-neutral-content: 0 0% 100%;
    --prismatik-base-100: 222 84% 5%;
    --prismatik-base-200: 215 28% 17%;
    --prismatik-base-300: 216 12% 84%;
    --prismatik-base-content: 210 20% 98%;
    --prismatik-info: 199 89% 48%;
    --prismatik-info-content: 0 0% 100%;
    --prismatik-success: 142 76% 36%;
    --prismatik-success-content: 0 0% 100%;
    --prismatik-warning: 38 92% 50%;
    --prismatik-warning-content: 0 0% 100%;
    --prismatik-error: 0 84% 60%;
    --prismatik-error-content: 0 0% 100%;
}

/* Blue Theme */
/*
:root {
    --prismatik-primary: 221 83% 53%;
    --prismatik-primary-content: 0 0% 100%;
    --prismatik-secondary: 262 83% 58%;
    --prismatik-secondary-content: 0 0% 100%;
    --prismatik-accent: 174 60% 51%;
    --prismatik-accent-content: 0 0% 100%;
    --prismatik-neutral: 219 14% 28%;
    --prismatik-neutral-content: 0 0% 100%;
    --prismatik-base-100: 0 0% 100%;
    --prismatik-base-200: 210 20% 98%;
    --prismatik-base-300: 216 12% 84%;
    --prismatik-base-content: 215 28% 17%;
    --prismatik-info: 199 89% 48%;
    --prismatik-info-content: 0 0% 100%;
    --prismatik-success: 142 76% 36%;
    --prismatik-success-content: 0 0% 100%;
    --prismatik-warning: 38 92% 50%;
    --prismatik-warning-content: 0 0% 100%;
    --prismatik-error: 0 84% 60%;
    --prismatik-error-content: 0 0% 100%;
}
*/

/* ===== UI COMPONENT CLASSES ===== */
/* Window Controls */
.window-control {
    width: 1rem;
    height: 1rem;
    border: none;
    border-radius: 10%;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.window-control.minimize {
    background: hsl(var(--prismatik-warning));
    color: hsl(var(--prismatik-warning-content));
}

.window-control.minimize:hover {
    background: hsl(var(--prismatik-warning) / 0.8);
    transform: scale(1.05);
}

.window-control.close {
    background: hsl(var(--prismatik-error));
    color: hsl(var(--prismatik-error-content));
}

.window-control.close:hover {
    background: hsl(var(--prismatik-error) / 0.8);
    transform: scale(1.05);
}

/* Property Controls */
.property-control {
    width: 100%;
    padding: 0.25rem;
    border: 1px solid hsl(var(--prismatik-base-content) / 0.2);
    border-radius: 0.25rem;
    background: hsl(var(--prismatik-base-100));
    color: hsl(var(--prismatik-base-content));
    transition: border-color 0.2s ease;
}

.property-control:focus {
    outline: none;
    border-color: hsl(var(--prismatik-primary));
}

.property-control:hover {
    border-color: hsl(var(--prismatik-base-content) / 0.4);
}

/* Layer Action Buttons */
.layer-action-btn {
    flex: 1;
    padding: 4px 8px;
    font-size: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.layer-action-btn.primary {
    background: hsl(var(--prismatik-primary));
    color: hsl(var(--prismatik-primary-content));
}

.layer-action-btn.primary:hover {
    background: hsl(var(--prismatik-primary) / 0.8);
    transform: translateY(-1px);
}

.layer-action-btn.secondary {
    background: hsl(var(--prismatik-base-200));
    color: hsl(var(--prismatik-base-content));
    border: 1px solid hsl(var(--prismatik-base-content) / 0.2);
}

.layer-action-btn.secondary:hover {
    background: hsl(var(--prismatik-base-300));
    border-color: hsl(var(--prismatik-base-content) / 0.4);
}

.layer-action-btn.danger {
    background: hsl(var(--prismatik-error));
    color: hsl(var(--prismatik-error-content));
}

.layer-action-btn.danger:hover {
    background: hsl(var(--prismatik-error) / 0.8);
    transform: translateY(-1px);
}

/* Resize Handle */
.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: hsl(var(--prismatik-base-content) / 0.3);
    cursor: nw-resize;
    border-radius: 0 0 0.375rem 0;
    transition: background 0.2s ease;
}

.resize-handle:hover {
    background: hsl(var(--prismatik-base-content) / 0.5);
}

/* Property Groups */
.property-group {
    margin-bottom: 1rem;
}

.property-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--prismatik-base-content));
    margin-bottom: 0.25rem;
}

.property-button {
    background: hsl(var(--prismatik-error));
    color: hsl(var(--prismatik-error-content));
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.property-button:hover {
    background: hsl(var(--prismatik-error) / 0.8);
    transform: translateY(-1px);
}

.property-help {
    font-size: 0.75rem;
    color: hsl(var(--prismatik-base-content) / 0.7);
    text-align: center;
}

.status-bar{
    font-size: 0.75rem;
    color: hsl(var(--prismatik-base-content) / 0.5);
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}

#main-canvas{
    border: 1px solid rgba(155, 155, 155, 0.3);
    background-color: transparent;
    background-image: 
        linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* ===== CUSTOMIZATION GUIDE ===== */
/*
To customize Prismatik's colors, simply override the CSS variables above.

All colors use HSL format: hue saturation% lightness%
- Hue: 0-360 (color wheel position)
- Saturation: 0-100% (color intensity)
- Lightness: 0-100% (brightness)

Common color values:
- Red: 0 84% 60%
- Green: 142 76% 36%
- Blue: 221 83% 53%
- Purple: 259 94% 51%
- Orange: 38 92% 50%
- Yellow: 60 100% 50%
- Pink: 314 100% 47%
- Cyan: 174 60% 51%
- Gray: 0 0% 50%
- Black: 0 0% 0%
- White: 0 0% 100%

To change colors, uncomment and modify the theme presets above,
or add your own custom variables to override the defaults.
*/