/* CSS Variables & Theme System */
        :root {
            /* Primary Colors */
            --primary-color: #667eea;
            --primary-hover: #5a67d8;
            --primary-light: #7f9cf5;
            --primary-dark: #4c51bf;
            --secondary-color: #764ba2;
            --secondary-hover: #6b4b8e;
            --secondary-light: #9f7aea;
            --secondary-dark: #553c9a;
            
            /* Status Colors */
            --success-color: #48bb78;
            --danger-color: #f56565;
            --warning-color: #ed8936;
            --info-color: #4299e1;
            
            /* Light Theme Colors */
            --bg-primary: #f8f9fa;
            --bg-secondary: #ffffff;
            --bg-tertiary: #f3f4f6;
            --surface-color: #ffffff;
            --surface-hover: #f8f9fa;
            --border-color: #e5e7eb;
            
            /* Text Colors */
            --text-primary: #111827;
            --text-secondary: #374151;
            --text-muted: #6b7280;
            
            /* Spacing */
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 4rem;
            
            /* Border Radius */
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --radius-full: 9999px;
            
            /* Shadows */
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            
            /* Transitions */
            --transition-fast: 200ms ease;
            --transition-base: 250ms ease;
            --transition-slow: 300ms ease;
            --transition-slower: 400ms ease;
            
            /* Z-index */
            --z-dropdown: 100;
            --z-sticky: 200;
            --z-fixed: 300;
            --z-modal-backdrop: 400;
            --z-modal: 500;
            --z-notification: 800;
            --z-maximum: 999;
        }

        /* Global Reset & Base Styles */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
            height: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
            transition: background-color var(--transition-slow);
        }

        /* Selection Styles */
        ::selection {
            background: var(--primary-color);
            color: white;
        }

        /* Scrollbar Styles */
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
        }

        ::-webkit-scrollbar-thumb {
            background: #d1d5db;
            border-radius: var(--radius-md);
            border: 2px solid var(--bg-tertiary);
            transition: background var(--transition-fast);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
        }

        /* Focus Styles */
        :focus {
            outline: none;
        }

        :focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* Main App Container */
        .app-container {
            display: grid;
            grid-template-areas: 
                "header header header"
                "sidebar canvas panel";
            grid-template-columns: 320px 1fr 320px;
            grid-template-rows: 70px 1fr;
            height: 100vh;
            overflow: hidden;
            opacity: 1;
        }

        /* Header */
        .header {
            grid-area: header;
            background: var(--surface-color);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--spacing-lg);
            position: relative;
            z-index: var(--z-sticky);
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .header-logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .header-center {
            display: flex;
            align-items: center;
            gap: var(--spacing-2xl);
        }

        .header-tabs {
            display: flex;
            background: var(--bg-tertiary);
            border-radius: var(--radius-full);
            padding: var(--spacing-xs);
        }

        .header-tab {
            padding: var(--spacing-sm) var(--spacing-lg);
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
        }

        .header-tab:hover {
            color: var(--text-secondary);
        }

        .header-tab.active {
            background: var(--primary-color);
            color: white;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }

        .header-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            position: relative;
            overflow: hidden;
        }

        .header-btn:hover {
            background: var(--surface-hover);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-1px);
        }

        .header-btn:active {
            transform: translateY(0);
        }

        .header-btn.primary {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .header-btn.primary:hover {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
        }

        .header-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        /* Sidebar */
        .sidebar {
            grid-area: sidebar;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: transform var(--transition-fast);
            position: relative;
        }

        .sidebar.collapsed {
            transform: translateX(-320px);
        }

        .sidebar-toggle {
            position: absolute;
            right: -20px;
            top: 20px;
            width: 20px;
            height: 40px;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-left: none;
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }

        .sidebar-toggle:hover {
            background: var(--surface-hover);
        }

        .sidebar-header {
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sidebar-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-secondary);
        }

        .sidebar-nav {
            padding: var(--spacing-md);
        }

        .sidebar-nav-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-sm) var(--spacing-md);
            margin-bottom: var(--spacing-xs);
            background: transparent;
            border: none;
            border-radius: var(--radius-md);
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
            width: 100%;
            text-align: left;
        }

        .sidebar-nav-item:hover {
            background: var(--surface-hover);
            color: var(--text-secondary);
        }

        .sidebar-nav-item.active {
            background: var(--primary-color);
            color: white;
        }

        .sidebar-nav-icon {
            font-size: 1.125rem;
        }

        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: var(--spacing-lg);
        }

        /* Section */
        .section {
            margin-bottom: var(--spacing-xl);
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--spacing-md);
        }

        .section-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .section-title-icon {
            color: var(--primary-color);
        }

        .section-action {
            background: transparent;
            border: none;
            color: var(--primary-color);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .section-action:hover {
            color: var(--primary-hover);
        }

        .section-content {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            transition: all var(--transition-fast);
        }

        .section-content:hover {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 1px var(--primary-color);
        }

        /* Form Controls */
        .form-group {
            margin-bottom: var(--spacing-md);
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-xs);
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: var(--spacing-sm) var(--spacing-md);
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 0.875rem;
            transition: all var(--transition-fast);
        }

        .form-input:hover,
        .form-select:hover,
        .form-textarea:hover {
            border-color: var(--primary-color);
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-textarea {
            resize: vertical;
            min-height: 100px;
        }

        .form-checkbox {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            cursor: pointer;
        }

        .form-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary-color);
            cursor: pointer;
        }

        .form-range {
            width: 100%;
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: var(--radius-full);
            outline: none;
            cursor: pointer;
            -webkit-appearance: none;
        }

        .form-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .form-range::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
        }

        .form-range::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: var(--radius-full);
            cursor: pointer;
            border: none;
            transition: all var(--transition-fast);
        }

        .form-range::-moz-range-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
        }

        /* Color Picker */
        .color-picker {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
            gap: var(--spacing-sm);
        }

        .color-option {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            border: 2px solid transparent;
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
            overflow: hidden;
        }

        .color-option::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 20px;
            height: 20px;
            background: white;
            border-radius: var(--radius-full);
            transition: transform var(--transition-fast);
        }

        .color-option:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .color-option.active {
            border-color: white;
            box-shadow: 0 0 0 3px var(--primary-color);
        }

        .color-option.active::after {
            transform: translate(-50%, -50%) scale(1);
        }

        .color-custom {
            background: linear-gradient(45deg, #ccc 25%, transparent 25%), 
                        linear-gradient(-45deg, #ccc 25%, transparent 25%), 
                        linear-gradient(45deg, transparent 75%, #ccc 75%), 
                        linear-gradient(-45deg, transparent 75%, #ccc 75%);
            background-size: 10px 10px;
            background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
        }

        /* Template Grid */
        .template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: var(--spacing-md);
        }

        .template-card {
            aspect-ratio: 5/7;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
            overflow: hidden;
            padding: var(--spacing-md);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .template-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.2);
        }

        .template-card.active {
            border-color: var(--primary-color);
            background: var(--surface-hover);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }

        .template-preview {
            width: 100%;
            height: 70%;
            background: var(--bg-tertiary);
            border-radius: var(--radius-sm);
            margin-bottom: var(--spacing-sm);
            position: relative;
            overflow: hidden;
        }

        .template-preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .template-name {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* Canvas Area */
        .canvas-area {
            grid-area: canvas;
            background: var(--bg-tertiary);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        .canvas-toolbar {
            background: var(--surface-color);
            border-bottom: 1px solid var(--border-color);
            padding: var(--spacing-sm) var(--spacing-lg);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-md);
            flex-shrink: 0;
        }

        .toolbar-group {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .toolbar-separator {
            width: 1px;
            height: 24px;
            background: var(--border-color);
            margin: 0 var(--spacing-sm);
        }

        .toolbar-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.125rem;
            position: relative;
        }

        .toolbar-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .toolbar-btn.active {
            background: var(--primary-color);
            color: white;
        }

        .toolbar-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .toolbar-dropdown {
            position: relative;
        }

        .toolbar-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            min-width: 200px;
            margin-top: var(--spacing-xs);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all var(--transition-fast);
            z-index: var(--z-dropdown);
        }

        .toolbar-dropdown.open .toolbar-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .canvas-viewport {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-2xl);
            position: relative;
            overflow: auto;
            background-image: 
                linear-gradient(45deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.02) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.02) 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }

        .canvas-container {
            position: relative;
            transition: all var(--transition-slow);
        }

        #fabricCanvas {
            box-shadow: 
                0 2px 4px rgba(0, 0, 0, 0.05),
                0 4px 8px rgba(0, 0, 0, 0.05),
                0 8px 16px rgba(0, 0, 0, 0.1),
                0 16px 32px rgba(0, 0, 0, 0.15);
            border-radius: var(--radius-lg);
        }

        /* Side Switcher */
        .side-switcher {
            position: absolute;
            bottom: var(--spacing-lg);
            right: var(--spacing-lg);
            display: flex;
            gap: var(--spacing-md);
            z-index: 10;
        }

        .side-btn {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            font-weight: 500;
        }

        .side-btn:hover {
            background: var(--surface-hover);
            border-color: var(--primary-color);
        }

        .side-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        /* Right Panel */
        .right-panel {
            grid-area: panel;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: transform var(--transition-fast);
        }

        .right-panel.collapsed {
            transform: translateX(100%);
            margin-left: -320px;
        }

        .panel-tabs {
            display: flex;
            background: var(--surface-color);
            border-bottom: 1px solid var(--border-color);
        }

        .panel-tab {
            flex: 1;
            padding: var(--spacing-md);
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            position: relative;
        }

        .panel-tab:hover {
            color: var(--text-secondary);
            background: var(--surface-hover);
        }

        .panel-tab.active {
            color: var(--primary-color);
            background: var(--bg-secondary);
            border-bottom: 3px solid var(--primary-color);
        }

        .panel-tab-icon {
            font-size: 1.25rem;
        }

        .panel-content {
            flex: 1;
            overflow-y: auto;
            padding: var(--spacing-lg);
        }

        /* Layers Panel */
        .layers-list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }

        .layer-item {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: var(--spacing-sm) var(--spacing-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .layer-item:hover {
            background: var(--surface-hover);
            border-color: var(--primary-color);
        }

        .layer-item.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .layer-icon {
            font-size: 1.125rem;
            opacity: 0.8;
        }

        .layer-name {
            flex: 1;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .layer-visibility {
            background: transparent;
            border: none;
            color: inherit;
            font-size: 1.125rem;
            cursor: pointer;
            padding: var(--spacing-xs);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }

        .layer-visibility:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .layer-lock {
            background: transparent;
            border: none;
            color: inherit;
            font-size: 1.125rem;
            cursor: pointer;
            padding: var(--spacing-xs);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }

        .layer-lock:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Layer Controls */
        .layer-controls {
            display: flex;
            gap: var(--spacing-xs);
            margin-left: auto;
        }

        .layer-control-btn {
            background: transparent;
            border: none;
            color: inherit;
            font-size: 0.875rem;
            cursor: pointer;
            padding: var(--spacing-xs);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }

        .layer-control-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Properties Panel */
        .property-group {
            margin-bottom: var(--spacing-xl);
        }

        .property-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--spacing-md);
            cursor: pointer;
        }

        .property-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .property-toggle {
            color: var(--text-muted);
            transition: transform var(--transition-fast);
        }

        .property-group.collapsed .property-toggle {
            transform: rotate(-90deg);
        }

        .property-content {
            display: grid;
            gap: var(--spacing-md);
            transition: all var(--transition-fast);
        }

        .property-group.collapsed .property-content {
            display: none;
        }

        .property-field {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .property-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            min-width: 80px;
        }

        .property-value {
            flex: 1;
        }

        /* Export Panel */
        .export-options {
            display: grid;
            gap: var(--spacing-md);
        }

        .export-option {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .export-option:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .export-option-header {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-sm);
        }

        .export-option-icon {
            font-size: 1.5rem;
            color: var(--primary-color);
        }

        .export-option-title {
            font-size: 1.125rem;
            font-weight: 600;
        }

        .export-option-desc {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* Preview Modal */
        .preview-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-modal);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-fast);
            padding: var(--spacing-2xl);
        }

        .preview-modal.show {
            opacity: 1;
            visibility: visible;
        }

        .preview-container {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-lg);
        }
        
        .preview-container::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: 10%;
            right: 10%;
            height: 60px;
            background: rgba(0, 0, 0, 0.2);
            filter: blur(30px);
            border-radius: 50%;
            z-index: -1;
        }

        .preview-canvas {
            background: white;
            box-shadow: 
                0 4px 6px rgba(0, 0, 0, 0.1),
                0 8px 15px rgba(0, 0, 0, 0.1),
                0 16px 40px rgba(0, 0, 0, 0.2);
            border-radius: var(--radius-lg);
            max-width: 100%;
            max-height: calc(90vh - 100px);
            object-fit: contain;
            position: relative;
        }

        .preview-controls {
            display: flex;
            gap: var(--spacing-md);
            background: var(--surface-color);
            padding: var(--spacing-md);
            border-radius: var(--radius-lg);
            align-items: center;
        }

        .preview-close {
            position: absolute;
            top: var(--spacing-lg);
            right: var(--spacing-lg);
            background: var(--surface-color);
            border: none;
            color: var(--text-primary);
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.25rem;
            transition: all var(--transition-fast);
        }

        .preview-close:hover {
            background: var(--danger-color);
            color: white;
        }

        /* Modal */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-modal-backdrop);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-fast);
            backdrop-filter: blur(5px);
        }

        .modal-backdrop.show {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background: var(--surface-color);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow: hidden;
            transform: scale(0.9);
            transition: transform var(--transition-fast);
            box-shadow: var(--shadow-2xl);
        }

        .modal-backdrop.show .modal {
            transform: scale(1);
        }

        .modal-header {
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            padding: var(--spacing-xs);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }

        .modal-close:hover {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .modal-body {
            padding: var(--spacing-lg);
            overflow-y: auto;
            max-height: calc(90vh - 140px);
        }

        .modal-footer {
            padding: var(--spacing-lg);
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: var(--spacing-md);
            justify-content: flex-end;
        }

        /* Progress Bar */
        .progress {
            background: var(--bg-tertiary);
            height: 8px;
            border-radius: var(--radius-full);
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

        /* Buttons */
        .btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transition: left var(--transition-fast);
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-secondary {
            background: var(--surface-color);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background: var(--surface-hover);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .btn-success {
            background: var(--success-color);
        }

        .btn-success:hover {
            background: #38a169;
        }

        .btn-danger {
            background: var(--danger-color);
        }

        .btn-danger:hover {
            background: #e53e3e;
        }

        .btn-warning {
            background: var(--warning-color);
        }

        .btn-warning:hover {
            background: #dd6b20;
        }

        .btn-ghost {
            background: transparent;
            color: var(--text-secondary);
            border: none;
        }

        .btn-ghost:hover {
            background: var(--surface-hover);
        }

        .btn-sm {
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: 0.75rem;
        }

        .btn-lg {
            padding: var(--spacing-md) var(--spacing-xl);
            font-size: 1.125rem;
        }

        .btn-block {
            width: 100%;
        }

        .btn-icon {
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: var(--radius-full);
        }

        .btn-group {
            display: flex;
            gap: -1px;
        }

        .btn-group .btn {
            border-radius: 0;
        }

        .btn-group .btn:first-child {
            border-radius: var(--radius-md) 0 0 var(--radius-md);
        }

        .btn-group .btn:last-child {
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        /* Notification System */
        .notifications {
            position: fixed;
            top: 80px;
            right: var(--spacing-lg);
            z-index: var(--z-notification);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
            pointer-events: none;
        }

        .notification {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--spacing-md) var(--spacing-lg);
            box-shadow: var(--shadow-xl);
            transform: translateX(400px);
            transition: transform var(--transition-fast);
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            min-width: 300px;
            position: relative;
            overflow: hidden;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--notification-color);
        }

        .notification.success { --notification-color: var(--success-color); }
        .notification.error { --notification-color: var(--danger-color); }
        .notification.warning { --notification-color: var(--warning-color); }
        .notification.info { --notification-color: var(--info-color); }

        .notification-icon {
            font-size: 1.25rem;
            color: var(--notification-color);
        }

        .notification-content {
            flex: 1;
        }

        .notification-message {
            font-size: 0.875rem;
        }

        .notification-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.125rem;
            cursor: pointer;
            padding: var(--spacing-xs);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }

        .notification-close:hover {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        /* Context Menu */
        .context-menu {
            position: fixed;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-xl);
            min-width: 200px;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.95);
            transition: all 150ms ease;
            z-index: 600;
        }

        .context-menu.show {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }

        .context-menu-item {
            padding: var(--spacing-sm) var(--spacing-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .context-menu-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .context-menu-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .context-menu-item.disabled:hover {
            background: transparent;
            color: var(--text-secondary);
        }

        .context-menu-separator {
            height: 1px;
            background: var(--border-color);
            margin: var(--spacing-xs) 0;
        }

        .context-menu-icon {
            width: 20px;
            text-align: center;
        }

        /* Tooltip */
        [data-tooltip] {
            position: relative;
        }

        [data-tooltip]:hover::before {
            content: attr(data-tooltip);
            position: absolute;
            top: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.95);
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: normal;
            white-space: nowrap;
            z-index: 999999;
            pointer-events: none;
        }

        /* Arrow pointing up */
        [data-tooltip]:hover::after {
            content: '';
            position: absolute;
            top: calc(100% + 5px);
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-bottom-color: rgba(0, 0, 0, 0.95);
            z-index: 999999;
            pointer-events: none;
        }

        /* For elements at the bottom of the screen - show tooltip above */
        .side-switcher [data-tooltip]:hover::before {
            top: auto;
            bottom: calc(100% + 10px);
        }

        .side-switcher [data-tooltip]:hover::after {
            top: auto;
            bottom: calc(100% + 5px);
            border-bottom-color: transparent;
            border-top-color: rgba(0, 0, 0, 0.95);
        }
        /* Dropdown */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            min-width: 200px;
            margin-top: var(--spacing-xs);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all var(--transition-fast);
            z-index: var(--z-dropdown);
        }

        .dropdown.open .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-item {
            padding: var(--spacing-sm) var(--spacing-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .dropdown-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .dropdown-divider {
            height: 1px;
            background: var(--border-color);
            margin: var(--spacing-xs) 0;
        }
        
        /* Admin link style */
        .dropdown-item[onclick*="admin.php"] {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        .dropdown-item[onclick*="admin.php"]:hover {
            background: var(--primary-color);
            color: white;
        }

        /* Upload Area */
        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-lg);
            padding: var(--spacing-2xl);
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .upload-area:hover {
            border-color: var(--primary-color);
            background: var(--surface-hover);
        }

        .upload-area.highlight {
            border-color: var(--primary-color);
            background: rgba(102, 126, 234, 0.1);
        }

        /* Element Grid */
        .element-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-sm);
        }

        .element-item {
            aspect-ratio: 1;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            color: var(--text-secondary);
        }

        .element-item:hover {
            border-color: var(--primary-color);
            background: var(--surface-hover);
            transform: translateY(-2px);
        }

        /* Image Grid */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
        }

        .image-item {
            aspect-ratio: 1;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .image-item:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Gradient Grid */
        .gradient-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-md);
        }

        .gradient-item {
            height: 80px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            border: 2px solid transparent;
        }

        .gradient-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: white;
        }

        /* Pattern Grid */
        .pattern-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-md);
        }

        .pattern-item {
            aspect-ratio: 1;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .pattern-item:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }

        /* Effect Grid */
        .effect-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
        }

        .effect-item {
            aspect-ratio: 4/3;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            overflow: hidden;
        }

        .effect-item:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }

        .effect-item.active {
            border-color: var(--primary-color);
            background: var(--surface-hover);
        }

        .effect-preview {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }

        /* Shadow Presets */
        .shadow-presets {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
        }

        .shadow-preset {
            aspect-ratio: 4/3;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .shadow-preset:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }

        .shadow-preview {
            background: white;
            color: #333;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            font-weight: 500;
        }

        /* Alignment Grid */
        .alignment-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-sm);
        }

        /* Chips */
        .chip {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-xs) var(--spacing-md);
            background: var(--bg-tertiary);
            border-radius: var(--radius-full);
            font-size: 0.875rem;
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-right: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
        }

        .chip:hover {
            background: var(--surface-hover);
        }

        .chip.active {
            background: var(--primary-color);
            color: white;
        }

        /* Input Group */
        .input-group {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .range-value {
            min-width: 50px;
            text-align: right;
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* Grid Overlay */
        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background-image: 
                linear-gradient(rgba(102, 126, 234, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(102, 126, 234, 0.15) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

        .grid-overlay.show {
            opacity: 1;
        }

        /* Rulers */
        .ruler-horizontal,
        .ruler-vertical {
            position: absolute;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            display: none;
            z-index: 10;
            font-size: 10px;
            color: var(--text-muted);
            overflow: hidden;
        }

        .ruler-horizontal {
            top: 0;
            left: 0;
            right: 0;
            height: 20px;
        }

        .ruler-vertical {
            top: 0;
            left: 0;
            bottom: 0;
            width: 20px;
        }

        .ruler-marks-h,
        .ruler-marks-v {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .ruler-mark {
            position: absolute;
            background: var(--border-color);
        }

        .ruler-mark-h {
            width: 1px;
            height: 100%;
            top: 0;
        }

        .ruler-mark-v {
            width: 100%;
            height: 1px;
            left: 0;
        }

        .ruler-mark-major {
            background: var(--text-muted);
        }

        .ruler-mark-h.ruler-mark-major {
            height: 12px;
        }

        .ruler-mark-v.ruler-mark-major {
            width: 12px;
        }

        .ruler-mark-minor {
            opacity: 0.5;
        }

        .ruler-mark-h.ruler-mark-minor {
            height: 6px;
            bottom: 0;
            top: auto;
        }

        .ruler-mark-v.ruler-mark-minor {
            width: 6px;
            right: 0;
            left: auto;
        }

        .ruler-number {
            position: absolute;
            font-size: 9px;
            color: var(--text-muted);
        }

        .ruler-number-h {
            top: 2px;
            transform: translateX(-50%);
        }

        .ruler-number-v {
            left: 2px;
            transform: translateY(-50%) rotate(-90deg);
            transform-origin: center;
        }

        .rulers-enabled .ruler-horizontal,
        .rulers-enabled .ruler-vertical {
            display: block;
        }

        .rulers-enabled .canvas-viewport {
            padding-top: calc(var(--spacing-2xl) + 20px);
            padding-left: calc(var(--spacing-2xl) + 20px);
        }

        /* Mobile Menu Buttons */
        .mobile-menu-btn,
        .mobile-tools-btn {
            display: none;
            position: fixed;
            bottom: var(--spacing-lg);
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: var(--radius-full);
            color: white;
            font-size: 1.5rem;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-xl);
            cursor: pointer;
            transition: all var(--transition-fast);
            z-index: var(--z-fixed);
        }

        .mobile-menu-btn {
            left: var(--spacing-lg);
        }

        .mobile-tools-btn {
            right: var(--spacing-lg);
        }

        .mobile-menu-btn:hover,
        .mobile-tools-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
        }

        /* Mobile Overlay */
        .mobile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-fast);
            z-index: var(--z-modal-backdrop);
        }

        .mobile-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* Skeleton Loading */
        .skeleton {
            background: linear-gradient(
                90deg,
                var(--surface-color) 25%,
                var(--surface-hover) 50%,
                var(--surface-color) 75%
            );
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: var(--radius-md);
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }

        /* Drawing Mode */
        .drawing-mode {
            cursor: crosshair !important;
        }

        .drawing-mode * {
            cursor: crosshair !important;
        }

        /* Text Editing */
        .text-editing {
            border: 2px solid var(--primary-color) !important;
            padding: 10px !important;
            background: rgba(255, 255, 255, 0.9) !important;
            color: #333 !important;
        }

        /* Zoom Level */
        .zoom-level {
            background: var(--bg-tertiary);
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            font-weight: 500;
            min-width: 60px;
            text-align: center;
        }

        /* Canvas for High Quality Zoom */
        .canvas-inner-wrapper {
            transform-origin: center center;
            transition: transform 0.15s ease-out;
        }

        /* Utility Classes */
        .hidden { display: none !important; }
        .ml-auto { margin-left: auto; }
        .mr-auto { margin-right: auto; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .text-sm { font-size: 0.875rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }
        .text-muted { color: var(--text-muted); }
        .font-bold { font-weight: 700; }
        .font-medium { font-weight: 500; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mt-3 { margin-top: 0.75rem; }
        .mt-4 { margin-top: 1rem; }
        .flex { display: flex; }
        .gap-2 { gap: 0.5rem; }

        /* Responsive */
        @media (max-width: 1400px) {
            .app-container {
                grid-template-columns: 280px 1fr 280px;
            }
        }

        @media (max-width: 1200px) {
            .app-container {
                grid-template-columns: 260px 1fr 260px;
            }
        }

        @media (max-width: 992px) {
            .app-container {
                grid-template-areas: 
                    "header header"
                    "canvas canvas";
                grid-template-columns: 1fr 1fr;
            }
            
            .sidebar,
            .right-panel {
                position: fixed;
                top: 70px;
                bottom: 0;
                width: 320px;
                transform: translateX(-100%);
                transition: transform var(--transition-fast);
                z-index: var(--z-fixed);
                box-shadow: var(--shadow-2xl);
            }
            
            .sidebar.mobile-open {
                transform: translateX(0);
            }
            
            .right-panel {
                right: 0;
                left: auto;
                transform: translateX(100%);
            }
            
            .right-panel.mobile-open {
                transform: translateX(0);
            }
            
            .mobile-menu-btn,
            .mobile-tools-btn {
                display: flex;
            }

            .sidebar-toggle {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .header {
                padding: 0 var(--spacing-md);
            }
            
            .header-logo span {
                display: none;
            }
            
            .header-center {
                display: none;
            }
            
            .header-btn span {
                display: none;
            }
            
            .canvas-toolbar {
                flex-wrap: wrap;
                padding: var(--spacing-xs) var(--spacing-md);
            }
            
            .toolbar-group {
                flex-wrap: wrap;
            }
            
            /* Notification position adjustment for mobile */
            .notifications {
                right: var(--spacing-sm);
                left: var(--spacing-sm);
            }
            
            .notification {
                min-width: auto;
                width: 100%;
            }
            
            /* Tablet grid adjustments */
            .gradient-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .pattern-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .app-container {
                grid-template-rows: 60px 1fr;
            }
            
            .header {
                height: 60px;
            }
            
            .canvas-viewport {
                padding: var(--spacing-lg);
            }
            
            .sidebar,
            .right-panel {
                width: 100%;
            }
            
            .side-switcher {
                bottom: var(--spacing-sm);
                right: var(--spacing-sm);
                flex-direction: column;
                gap: var(--spacing-xs);
            }
            
            .side-btn {
                padding: var(--spacing-xs) var(--spacing-md);
                font-size: 0.75rem;
            }
            
            /* Mobile grid adjustments */
            .gradient-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .pattern-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* No JS Fallback */
        .no-js .app-container {
            display: block;
        }