* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: #333;}.container {min-height: 100vh;display: flex;flex-direction: column;background: rgba(255, 255, 255, 0.05);}.toolbar {border-bottom: 1px solid rgba(255, 255, 255, 0.1);color: white;padding: 12px 20px;display: flex;justify-content: space-between;align-items: center;box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);position: relative;z-index: 1005;}.toolbar::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);pointer-events: none;}.toolbar h1 {font-size: 24px;font-weight: 600;letter-spacing: -0.5px;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.toolbar-logo {height: 32px;width: auto;object-fit: contain;filter: brightness(1.1) contrast(1.1);transition: all 0.3s ease;}.toolbar-logo:hover {filter: brightness(1.2) contrast(1.2);transform: scale(1.02);}.toolbar-buttons {display: flex;gap: 8px;}.btn {padding: 8px 12px;border: none;border-radius: 8px;background: transparent;color: white;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);font-size: 13px;font-weight: 500;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;}.btn-icon {width: 20px;height: 20px;filter: brightness(1);transition: all 0.3s ease;}.btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition: left 0.5s;}.btn:hover::before {left: 100%;}.btn:hover {background: rgba(255, 255, 255, 0.1);transform: translateY(-1px);border-radius: 12px;}.btn:hover .btn-icon {filter: brightness(1.2);transform: scale(1.1);}.btn:active {transform: translateY(0);}.btn:disabled {opacity: 0.4;cursor: not-allowed;}.btn:disabled .btn-icon {filter: brightness(0.7) grayscale(1);}.btn:disabled:hover {background: transparent;transform: none;}.btn-primary {background: linear-gradient(135deg, #3498db, #2980b9);color: white;border: none;}.btn-primary:hover {background: linear-gradient(135deg, #2980b9, #1e6fa8);transform: translateY(-1px);box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);}.btn-secondary {background: linear-gradient(135deg, #2ecc71, #27ae60);color: white;border: none;}.btn-secondary:hover {background: linear-gradient(135deg, #27ae60, #1e8449);transform: translateY(-1px);}.btn-danger {background: linear-gradient(135deg, #e74c3c, #c0392b);color: white;border: none;}.btn-danger:hover {background: linear-gradient(135deg, #c0392b, #a93226);transform: translateY(-1px);}.btn-warning {background-color: #ffc107;color: #212529;}.btn-warning:hover {background-color: #e0a800;}.main-content {flex: 1;display: flex;height: calc(100vh - 70px);position: relative;overflow: hidden;}.sidebar {width: 360px;background: rgba(255, 255, 255, 0.08);border-right: 1px solid rgba(255, 255, 255, 0.1);padding: 0;height: calc(100vh - 61px);color: #fff;display: flex;box-shadow: 4px 0 32px rgba(0, 0, 0, 0.1);transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);position: relative;}.vertical-nav {width: 80px;background: rgba(255, 255, 255, 0.05);display: flex;flex-direction: column;border-right: 1px solid rgba(255, 255, 255, 0.1);padding: 20px 0;z-index: 1001;flex-shrink: 0;}.nav-item {position: relative;padding: 10px;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);border-radius: 16px;margin: 6px 12px;aspect-ratio: 1;background: transparent;color: rgba(255, 255, 255, 0.7);border: 1px solid transparent;}.nav-item::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));border-radius: 16px;opacity: 0;transition: all 0.3s ease;}.nav-item:hover::before {opacity: 1;}.nav-item:hover {color: #ffffff;transform: translateY(-2px) scale(1.05);border-color: rgba(255, 255, 255, 0.2);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);}.nav-item.active {background: linear-gradient(135deg, #667eea, #764ba2);color: #ffffff;border-color: rgba(255, 255, 255, 0.3);box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);transform: translateY(-2px);}.nav-item.active::before {opacity: 0;}.nav-icon {font-size: 28px;filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));transition: all 0.3s ease;}.nav-item:hover .nav-icon {transform: scale(1.1);}.nav-label {font-size: 10px;font-weight: 600;text-align: center;line-height: 1.2;opacity: 0.9;white-space: nowrap;letter-spacing: 0.5px;text-transform: uppercase;display: none;}.nav-item.active .nav-label {opacity: 1;}.nav-item::after {content: attr(title);position: absolute;left: calc(100% + 15px);top: 50%;transform: translateY(-50%);background: rgba(0, 0, 0, 0.9);color: white;padding: 8px 12px;border-radius: 6px;font-size: 12px;white-space: nowrap;opacity: 0;visibility: hidden;transition: all 0.3s ease;z-index: 1000;pointer-events: none;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);}.nav-item:hover::after {opacity: 1;visibility: visible;left: calc(100% + 20px);}.sidebar-content {width: 280px;padding: 20px;overflow-y: auto;height: 100%;scrollbar-width: thin;scrollbar-color: #7c86e1 #34495e;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);background: rgba(255, 255, 255, 0.08);border-right: 1px solid rgba(255, 255, 255, 0.1);flex-shrink: 0;}.sidebar-collapse-btn {position: absolute;top: 20px;right: 15px;width: 30px;height: 30px;background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);padding: 5px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s ease;z-index: 1002;}.sidebar-collapse-btn:hover {background: rgba(255, 255, 255, 0.2);transform: scale(1.1);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}.sidebar-collapse-btn img {width: 100%;height: 100%;}.sidebar-collapse-btn:hover .collapse-icon {color: #ffffff;}.sidebar.collapsed {width: 80px;}.sidebar.collapsed .sidebar-content {opacity: 0;visibility: hidden;pointer-events: none;transform: translateX(-100%);}.sidebar.collapsed .sidebar-collapse-btn {opacity: 0;visibility: hidden;pointer-events: none;}.tab-content {display: none;opacity: 0;transform: translateY(20px);transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.tab-content.active {display: block;opacity: 1;visibility: visible;transform: translateY(0);animation: fadeInUp 0.5s ease;}@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}.tab-content h2 {color: #ecf0f1;font-size: 18px;margin-bottom: 20px;font-weight: 600;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding-bottom: 10px;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.upload-section {background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 24px;margin-bottom: 24px;border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease;position: relative;overflow: hidden;}.upload-section::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition: left 0.6s;}.upload-section:hover::before {left: 100%;}.upload-section:hover {border-color: rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.12);transform: translateY(-2px);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);}.upload-section h3 {color: #ecf0f1;margin-bottom: 16px;font-size: 16px;font-weight: 600;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.upload-btn {display: block;width: 100%;padding: 14px 24px;color: white;text-align: center;border-radius: 10px;cursor: pointer;margin-bottom: 0;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);font-weight: 600;font-size: 14px;border: none;position: relative;overflow: hidden;box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}.upload-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.5s;}.upload-btn:hover::before {left: 100%;}.upload-btn:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);}.image-gallery {display: flex;flex-wrap:wrap;gap: 12px;max-height: none;overflow-x: auto;overflow-y: hidden;padding: 12px 4px;scrollbar-width: thin;scrollbar-color: #3498db #34495e;-webkit-overflow-scrolling: touch;scroll-behavior: smooth;}.gallery-image-container {position: relative;width: 80px;height: 80px;min-width: 80px;flex-shrink: 0;border-radius: 8px;overflow: hidden;cursor: grab;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);}.gallery-image-container:hover {transform: translateY(-4px) scale(1.08);border-color: rgba(255, 255, 255, 0.3);box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);}.gallery-image {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}.gallery-image-container:hover .gallery-image {transform: scale(1.05);}.gallery-delete-btn {position: absolute;top: 0;right: 0;width: 22px;height: 22px;background: rgba(231, 76, 60, 0.9);color: white;border: none;border-radius: 50%;cursor: pointer;font-size: 12px;line-height: 22px;opacity: 0;transition: all 0.3s ease;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);display: flex;align-items: center;justify-content: center;font-weight: bold;}.gallery-delete-btn:hover {background: rgba(192, 57, 43, 0.95);}.gallery-image-container:hover .gallery-delete-btn {opacity: 1;}@keyframes fadeIn {from {opacity: 0;transform: scale(0.8);}to {opacity: 1;transform: scale(1);}}.layout-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;margin-bottom: 20px;}.layout-item {background: rgba(255, 255, 255, 0.08);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 12px;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position: relative;overflow: hidden;}.layout-item::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));opacity: 0;transition: opacity 0.3s ease;}.layout-item:hover::before {opacity: 1;}.layout-item:hover {transform: translateY(-2px);border-color: rgba(255, 255, 255, 0.3);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);}.layout-item.active {background: linear-gradient(135deg, #667eea, #764ba2);border-color: rgba(255, 255, 255, 0.4);box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);}.layout-preview {width: 40px;height: 40px;display: grid;gap: 2px;margin: 0 auto 8px;background: rgba(255, 255, 255, 0.1);border-radius: 4px;padding: 4px;}.layout-preview .cell {background: rgba(255, 255, 255, 0.6);border-radius: 2px;}.layout-preview .free-cell {background: rgba(255, 255, 255, 0.3);border: 1px dashed rgba(255, 255, 255, 0.7);border-radius: 2px;}.layout-item span {display: block;text-align: center;color: rgba(255, 255, 255, 0.9);font-size: 11px;font-weight: 500;}.settings-group {background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 15px;margin-bottom: 15px;border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease;}.settings-group:hover {border-color: rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.12);}.settings-group h3 {color: #ecf0f1;font-size: 14px;margin-bottom: 15px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.slider-container {display: flex;align-items: center;gap: 12px;margin-bottom: 15px;}.slider-container input[type="range"] {flex: 1;height: 6px;background: rgba(255, 255, 255, 0.1);border-radius: 3px;outline: none;appearance: none;}.slider-container input[type="range"]::-webkit-slider-thumb {appearance: none;width: 18px;height: 18px;background: linear-gradient(135deg, #3498db, #2980b9);border-radius: 50%;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);}.slider-container input[type="range"]::-webkit-slider-thumb:hover {background: linear-gradient(135deg, #2980b9, #1e6fa8);transform: scale(1.1);}.slider-container span {color: #3498db;font-size: 12px;font-weight: 600;}.collage-area {flex: 1;display: flex;align-items: center;justify-content: center;padding: 20px;background: rgba(255, 255, 255, 0.02);position: relative;min-height: calc(100vh - 145px);overflow: auto;}.canvas-container {position: relative;display: inline-block;border-radius: 8px;cursor: move;user-select: none;touch-action: none;-webkit-touch-callout: none;-webkit-user-select: none;transition: opacity 0.4s ease, transform 0.4s ease;-moz-user-select: none;-ms-user-select: none;opacity: 0;visibility: hidden;transform: translateZ(0) scale(0.95);transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);will-change: opacity, visibility, transform;}.canvas-container.loading {opacity: 0;visibility: hidden;transform: translateZ(0) scale(0.95);pointer-events: none;}.canvas-container.initialized {opacity: 1;visibility: visible;transform: translateZ(0) scale(1);pointer-events: auto;}#collage-canvas {display: block;border-radius: 6px;touch-action: none;-webkit-touch-callout: none;}.image-item img {width: 100%;height: 100%;object-fit: cover;border-radius: 4px;cursor: grab;touch-action: none;-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;}.image-item img:active {cursor: grabbing;}.properties-panel {width: 300px;background: rgba(255, 255, 255, 0.08);border-left: 1px solid rgba(255, 255, 255, 0.1);padding: 24px;box-shadow: -4px 0 32px rgba(0, 0, 0, 0.1);position: fixed;right: -300px;top: 61px;height: calc(100vh - 61px);overflow-y: auto;transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);z-index: 1000;color: white;}.properties-panel.visible {right: 0;}.properties-panel h2 {margin-bottom: 20px;color: #ecf0f1;font-size: 18px;font-weight: 600;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.property-group {background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 20px;margin-bottom: 20px;border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease;}.property-group:hover {border-color: rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.12);}.control-item {margin-bottom: 15px;}.control-item label {display: flex;align-items: center;justify-content: space-between;font-size: 14px;color: rgba(255, 255, 255, 0.9);margin-bottom: 8px;font-weight: 500;gap: 5px;white-space: nowrap;}.control-item input[type="range"] {flex: 1;height: 6px;background: rgba(255, 255, 255, 0.6);border-radius: 3px;outline: none;appearance: none;}.control-item input[type="range"]::-webkit-slider-thumb {appearance: none;width: 18px;height: 18px;background: linear-gradient(135deg, #3498db, #2980b9);border-radius: 50%;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);}.control-item input[type="range"]::-webkit-slider-thumb:hover {background: linear-gradient(135deg, #2980b9, #1e6fa8);transform: scale(1.1);}.control-item span {min-width: 30px;text-align: center;font-weight: 600;color: #fff;font-size: 16px;}.button-section {margin-top: 24px;display: flex;flex-direction: column;gap: 12px;}.button-section .btn {width: 100%;padding: 12px 20px;border: none;border-radius: 8px;font-size: 14px;font-weight: 600;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position: relative;overflow: hidden;}.input-row {display: flex;align-items: center;gap: 12px;padding: 10px 0;}.input-row label {color: rgba(255, 255, 255, 0.9);font-size: 13px;min-width: 50px;font-weight: 500;}.input-row input[type="number"] {flex: 1;padding: 8px 12px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 6px;background: rgba(255, 255, 255, 0.08);color: #ecf0f1;font-size: 13px;transition: border-color 0.3s;}.input-row input[type="number"]:focus {border-color: #3498db;outline: none;box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);}.input-row input[type="color"] {flex: 1;height: 32px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 6px;background: none;cursor: pointer;padding: 0;}.slider-row {margin-bottom: 20px;}.slider-row label {display: block;color: rgba(255, 255, 255, 0.9);font-size: 13px;margin-bottom: 8px;font-weight: 500;}.setting-btn {padding: 12px 20px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 8px;background: rgba(255, 255, 255, 0.08);color: rgba(255, 255, 255, 0.9);cursor: pointer;font-size: 14px;font-weight: 500;transition: all 0.3s ease;text-align: center;width: 100%;}.setting-btn:hover {background: rgba(255, 255, 255, 0.15);color: #ffffff;border-color: #3498db;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);}.canvas-resize-handle {position: absolute;background: transparent;transition: background-color 0.2s ease;z-index: 20;}.canvas-resize-handle:hover {background-color: rgba(52, 152, 219, 0.3);}.canvas-resize-handle.active {background-color: rgba(52, 152, 219, 0.5);}.canvas-resize-handle.top-left, .canvas-resize-handle.top-right, .canvas-resize-handle.bottom-left, .canvas-resize-handle.bottom-right {width: 12px;height: 12px;border-radius: 50%;background: linear-gradient(135deg, #3498db, #2980b9);border: 2px solid white;box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);transition: all 0.3s ease;}.canvas-resize-handle.top {top: -4px;left: 0;right: 0;height: 8px;cursor: ns-resize;}.canvas-resize-handle.bottom {bottom: -4px;left: 0;right: 0;height: 8px;cursor: ns-resize;}.canvas-resize-handle.left {left: -4px;top: 0;bottom: 0;width: 8px;cursor: ew-resize;}.canvas-resize-handle.right {right: -4px;top: 0;bottom: 0;width: 8px;cursor: ew-resize;}.canvas-resize-handle.top-left {top: -6px;left: -6px;cursor: nw-resize;}.canvas-resize-handle.top-right {top: -6px;right: -6px;cursor: ne-resize;}.canvas-resize-handle.bottom-left {bottom: -6px;left: -6px;cursor: sw-resize;}.canvas-resize-handle.bottom-right {bottom: -6px;right: -6px;cursor: se-resize;}.canvas-resize-handle.top-left:hover, .canvas-resize-handle.top-right:hover, .canvas-resize-handle.bottom-left:hover, .canvas-resize-handle.bottom-right:hover {transform: scale(1.2);box-shadow: 0 4px 12px rgba(52, 152, 219, 0.6);}.sidebar-content::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .image-gallery::-webkit-scrollbar, .properties-panel::-webkit-scrollbar {width: 8px;height: 8px;}.sidebar-content::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track, .image-gallery::-webkit-scrollbar-track, .properties-panel::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.05);border-radius: 4px;}.sidebar-content::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .image-gallery::-webkit-scrollbar-thumb, .properties-panel::-webkit-scrollbar-thumb {background: linear-gradient(135deg, #3498db, #2980b9);border-radius: 4px;transition: background 0.3s;}.sidebar-content::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover, .image-gallery::-webkit-scrollbar-thumb:hover, .properties-panel::-webkit-scrollbar-thumb:hover {background: linear-gradient(135deg, #2980b9, #1e6fa8);}.image-gallery::-webkit-scrollbar {height: 6px;}.image-gallery::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.08);border-radius: 3px;margin: 0 8px;}.image-gallery::-webkit-scrollbar-thumb {background: linear-gradient(90deg, #3498db, #2980b9);border-radius: 3px;box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);}.image-gallery::-webkit-scrollbar-thumb:hover {background: linear-gradient(90deg, #2980b9, #1e6fa8);box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);}.layout-item[data-layout="1x1"] .layout-preview {grid-template-columns: 1fr;grid-template-rows: 1fr;}.layout-item[data-layout="1x2"] .layout-preview {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}.layout-item[data-layout="2x1"] .layout-preview {grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;}.layout-item[data-layout="2x2"] .layout-preview {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;}.layout-item[data-layout="3x3"] .layout-preview {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;}.layout-preview .free-cell::after {content: "Free";display: flex;align-items: center;justify-content: center;font-size: 8px;color: rgba(255, 255, 255, 0.8);font-weight: 600;}.text-format-buttons, .text-align-buttons {display: flex;gap: 5px;margin: 10px 0;}.format-btn, .align-btn {width: 30px;height: 30px;border: 1px solid rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.08);color: rgba(255, 255, 255, 0.9);cursor: pointer;border-radius: 4px;font-weight: bold;transition: all 0.3s;}.format-btn:hover, .align-btn:hover {background: rgba(255, 255, 255, 0.15);border-color: #3498db;}.format-btn.active, .align-btn.active {background: linear-gradient(135deg, #3498db, #2980b9);color: white;border-color: #3498db;}@media (max-width: 768px) {.main-content {flex-direction: column;position: relative;}.sidebar {position: fixed;bottom: 0;left: 0;width: 100%;height: 70px;flex-direction: column;z-index: 1010;border-right: none;border-top: 1px solid rgba(255, 255, 255, 0.2);box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15);}.sidebar.collapsed {height: 80px;}.vertical-nav {width: 100%;height: 70px;flex-direction: row;justify-content: space-between;align-items: center;padding: 0 20px;border-right: none;background: transparent;order: 1;}.nav-item {margin: 0;border-radius: 12px;flex-direction: column;gap: 4px;padding: 8px;}.nav-icon {width: 20px;height: 20px;flex-shrink: 0;}.nav-label {font-size: 9px;display: block;text-align: center;line-height: 1;font-weight: 500;opacity: 0.8;}.nav-item.active .nav-label {opacity: 1;font-weight: 600;}.action-icon{aspect-ratio: 1;padding: 10px;border-radius: 10px;background: rgba(255, 255, 255, 0.08);border: 1px solid rgba(255, 255, 255, 0.1);}.sidebar-content {will-change: height;position: absolute;bottom: 70px;left: 0;height: 170px;min-height: 170px;width: 100%;border-top: 1px solid rgba(255, 255, 255, 0.2);border-right: none;border-radius: 20px 20px 0 0;box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);transform: translateY(0);transition: height 0.3s ease;order: 0;overflow-y: auto;padding: 10px 20px;background: linear-gradient(135deg, rgba(102,126,234,0.7) 0%, rgba(118,75,162,0.7) 100%);visibility: visible;opacity: 1;}.sidebar:not(.collapsed) .sidebar-content {transform: translateY(0);}.sidebar.collapsed .sidebar-content {transform: translateY(100%);opacity: 1;visibility: visible;pointer-events: auto;}.sidebar-collapse-btn {display: none;}.collage-area {flex: 1;padding: 20px 20px 100px 20px;order: 1;align-items: unset;min-height: calc(100vh - 145px);}.canvas-container {position: relative;left: auto;top: auto;margin: 10% auto 0 auto;display: block;width: auto;height: auto;max-width: min(95vw, calc(100vh - 200px));max-height: min(95vw, calc(100vh - 200px));aspect-ratio: 1;transition: margin 0.3s ease;}.properties-panel.visible ~ .collage-area .canvas-container {margin: 2% auto 0 auto !important;}.properties-panel {position: fixed;bottom: 0;left: 0;right: 0;top: auto;height: auto;max-height: 70vh;width: 100%;border-left: none;border-top: 1px solid rgba(255, 255, 255, 0.2);border-radius: 20px 20px 0 0;box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);transform: translateY(100%);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);z-index: 1020;overflow-y: auto;padding: 15px 20px;background: linear-gradient(135deg, rgba(102, 126, 234, 0.6), rgba(118, 75, 162, 0.6));color: #fff;}.properties-panel.visible {transform: translateY(0);backdrop-filter: blur(3px);}.properties-panel h2 {color: #fff;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-align: center;margin-bottom: 10px;position: relative;}.property-group {border-color: rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.12);color: #333;}.control-item label {color: #fff;}.control-item span {color: #fff;}.nav-item::after {display: none;}.layout-grid{display: flex;margin: 0;overflow-x: auto;padding: 2px 0;gap: 8px;}.layout-item{overflow: unset;padding: 14px;touch-action: manipulation;}.button-section{gap: 8px;margin-top: 10px;flex-direction: row;}.button-section .btn{padding: 10px;text-wrap: nowrap;font-size: 12px;}.image-manager{display: flex;align-items: center;}.toolbar{padding: 5px 20px;}.properties-panel .property-group{margin: 0;}.upload-section{margin: 0;margin-right: 20px;width: 90px;height: 90px;padding: 0;flex-shrink: 0;}.upload-btn{padding: 0;background: unset;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}.upload-btn span:last-child{display: none;}.tab-content h2 {color: #fff;font-size: 16px;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 10px;}.image-gallery{padding: 6px 0;overflow-x: auto;gap: 20px;flex-wrap: nowrap;flex-direction: row;}.settings-group {border-color: rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.12);}.settings-group h3 {color: #fff;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.input-row label {color: #333;}.slider-row label {color: #333;}.input-row input[type="number"] {background: rgba(255, 255, 255, 0.8);border: 1px solid rgba(102, 126, 234, 0.3);color: #333;}.setting-btn {background: rgba(255, 255, 255, 0.8);border: 1px solid rgba(102, 126, 234, 0.3);color: #333;}.setting-btn:hover {background: rgba(102, 126, 234, 0.1);border-color: #667eea;}.toolbar h1{font-size: 18px;}.toolbar-logo {height: 24px;max-width: 120px;}.toolbar-buttons {gap: 8px;}.toolbar-buttons .btn {padding: 10px 12px;font-size: 16px;min-width: 44px;min-height: 44px;display: flex;align-items: center;justify-content: center;border-radius: 12px;}.toolbar-buttons .btn-icon {width: 24px;height: 24px;}}#image-upload {display: none;}.sidebar-tabs, .sidebar label, .sidebar span {color: rgba(255, 255, 255, 0.9) !important;}.ui-draggable-helper {z-index: 1000;border: 2px dashed #3498db;background-color: rgba(52, 152, 219, 0.1);border-radius: 4px;box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);}.dragging-image {position: absolute;pointer-events: none;z-index: 1000;border: 2px dashed #3498db;background: rgba(52, 152, 219, 0.1);border-radius: 4px;}#collage-canvas.drag-over {border: 4px dashed #3498db;background-color: rgba(52, 152, 219, 0.1);}.grid-cell-overlay {box-sizing: border-box;border: 2px dashed transparent;transition: border-color 0.2s, background-color 0.2s;z-index: 1;}.grid-cell-overlay.drag-over {border-color: #3498db;background-color: rgba(52, 152, 219, 0.2);}.panel-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transition: opacity 0.3s ease;z-index: 999;}.panel-overlay.visible {opacity: 1;visibility: visible;}.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.7);display: flex;align-items: center;justify-content: center;z-index: 10000;opacity: 0;visibility: hidden;transition: all 0.3s ease;}.modal-overlay.show {opacity: 1;visibility: visible;}.modal-content {background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));border-radius: 16px;width: 90%;max-width: 600px;max-height: 90vh;overflow: hidden;box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);transform: scale(0.9) translateY(20px);transition: transform 0.3s ease;position: relative;}.modal-content::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));pointer-events: none;z-index: 1;}.modal-overlay.show .modal-content {transform: scale(1) translateY(0);}.modal-header {padding: 24px 28px;border-bottom: 1px solid rgba(255, 255, 255, 0.15);display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 2;}.modal-header h2 {margin: 0;color: white;font-size: 20px;font-weight: 600;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.modal-close {background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);color: rgba(255, 255, 255, 0.8);font-size: 20px;cursor: pointer;padding: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 8px;transition: all 0.3s ease;font-weight: 300;}.modal-close:hover {background: rgba(255, 255, 255, 0.2);color: white;transform: scale(1.1);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}.modal-body {padding: 10px;display: flex;flex-direction: column;gap: 20px;max-height: 60vh;overflow-y: auto;position: relative;z-index: 2;}.download-preview {flex: 1;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 24px;min-height: 220px;border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.download-preview::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));pointer-events: none;}#download-preview-canvas {max-width: 100%;max-height: 200px;border-radius: 8px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);position: relative;z-index: 1;}.download-form {flex: 1;display: flex;flex-direction: column;gap: 24px;}.form-group {display: flex;flex-direction: column;gap: 10px;}.form-group label {color: rgba(255, 255, 255, 0.95);font-weight: 600;font-size: 14px;text-transform: uppercase;letter-spacing: 0.5px;}#download-filename {padding: 14px 16px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 10px;background: rgba(255, 255, 255, 0.08);color: white;font-size: 14px;transition: all 0.3s ease;backdrop-filter: blur(2px);}#download-filename:focus {outline: none;border-color: rgba(255, 255, 255, 0.4);background: rgba(255, 255, 255, 0.12);box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);}#download-filename::placeholder {color: rgba(255, 255, 255, 0.5);}.format-buttons {display: flex;gap: 10px;}.format-buttons .format-btn {flex: 1;padding: 12px 20px;border: 1px solid rgba(255, 255, 255, 0.2);background: rgba(255, 255, 255, 0.08);color: rgba(255, 255, 255, 0.9);border-radius: 10px;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);font-size: 14px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;position: relative;overflow: hidden;}.format-buttons .format-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition: left 0.5s;}.format-buttons .format-btn:hover::before {left: 100%;}.format-buttons .format-btn:hover {background: rgba(255, 255, 255, 0.15);border-color: rgba(255, 255, 255, 0.4);transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);}.format-buttons .format-btn.active {background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.4);color: white;box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);}.download-info {padding: 16px;background: rgba(255, 255, 255, 0.08);border-radius: 10px;color: rgba(255, 255, 255, 0.9);font-size: 13px;border: 1px solid rgba(255, 255, 255, 0.1);font-weight: 500;}.modal-footer {padding: 24px 28px;border-top: 1px solid rgba(255, 255, 255, 0.15);display: flex;gap: 16px;justify-content: flex-end;position: relative;z-index: 2;}.modal-footer .btn {min-width: 100px;font-size: 14px;font-weight: 600;padding: 12px 24px;border-radius: 10px;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position: relative;overflow: hidden;}.modal-footer .btn-secondary {background: rgba(255, 255, 255, 0.1);color: rgba(255, 255, 255, 0.9);border: 1px solid rgba(255, 255, 255, 0.2);}.modal-footer .btn-secondary:hover {background: rgba(255, 255, 255, 0.2);color: white;transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);}.modal-footer .btn-primary {background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));color: white;border: 1px solid rgba(255, 255, 255, 0.3);box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);}.modal-footer .btn-primary:hover {background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));transform: translateY(-2px);box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);}.format-btn, .align-btn {min-height: 44px;min-width: 44px;touch-action: manipulation;}.upload-btn {font-size: 16px;padding: 16px 24px;min-height: 48px;touch-action: manipulation;}.layout-grid {gap: 16px;}.slider-container input[type="range"] {height: 8px;touch-action: manipulation;}.slider-container input[type="range"]::-webkit-slider-thumb {width: 22px;height: 22px;}.input-row input[type="number"], .input-row input[type="color"] {min-height: 44px;font-size: 16px;touch-action: manipulation;}.modal-overlay {padding: 20px;}.modal-content {max-height: 90vh;overflow-y: auto;}.collage-area {padding: 10px;overflow: auto;-webkit-overflow-scrolling: touch;}.canvas-container {touch-action: manipulation;user-select: none;-webkit-user-select: none;}#center-canvas {touch-action: manipulation;max-width: calc(100vw - 20px);max-height: calc(100vh - 160px);}.image-item {touch-action: manipulation;user-select: none;-webkit-user-select: none;}.zoom-controls {position: fixed;bottom: 100px;right: 20px;z-index: 1000;display: flex;flex-direction: column;gap: 8px;}.zoom-btn {width: 48px;height: 48px;border-radius: 50%;border: none;background: rgba(255, 255, 255, 0.9);color: #333;font-size: 18px;font-weight: bold;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);touch-action: manipulation;display: flex;align-items: center;justify-content: center;}.zoom-btn:active {transform: scale(0.95);background: rgba(255, 255, 255, 0.8);}.properties-panel .tab-content {max-height: calc(70vh - 100px);overflow-y: auto;-webkit-overflow-scrolling: touch;}.properties-panel .property-group {margin-bottom: 10px;padding-bottom: 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.properties-panel .property-group:last-child {border-bottom: none;}.sidebar-content .tab-content {-webkit-overflow-scrolling: touch;}.text-controls textarea {font-size: 16px;min-height: 100px;touch-action: manipulation;}.color-picker-container {display: flex;flex-wrap: wrap;gap: 10px;margin-top: 10px;}.color-option {width: 40px;height: 40px;border-radius: 8px;border: 2px solid rgba(255, 255, 255, 0.2);touch-action: manipulation;}.color-option.active {border-color: #667eea;box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);}.gallery-image-container {width: 90px;height: 90px;min-width: 90px;scroll-snap-align: start;touch-action: pan-x;}.gallery-image-container:hover {transform: scale(1.05);box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);}.image-gallery::-webkit-scrollbar {height: 4px;}.image-gallery::-webkit-scrollbar-track {background: rgba(102, 126, 234, 0.1);border-radius: 2px;margin: 0 12px;}.image-gallery::-webkit-scrollbar-thumb {background: linear-gradient(90deg, #667eea, #764ba2);border-radius: 2px;}@media (max-width: 768px) {.modal-content {width: 95%;margin: 20px;border-radius: 12px;}.modal-body {flex-direction: column;gap: 20px;padding: 20px;}.download-preview {min-height: 150px;padding: 16px;}.modal-header, .modal-footer {padding: 16px;}.centerTab{display: none;}}.canvas-container {touch-action: none;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}#collage-canvas {touch-action: none;-webkit-touch-callout: none;}.gallery-image {touch-action: pan-x;-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;}.touch-dragging {opacity: 0.8;transform: scale(1.1);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);z-index: 10000;pointer-events: none;}#undo-btn:disabled, #redo-btn:disabled {opacity: 0.4;cursor: not-allowed;}#undo-btn:disabled .btn-icon, #redo-btn:disabled .btn-icon {filter: brightness(0.7) grayscale(1);}#undo-btn:disabled:hover, #redo-btn:disabled:hover {background: transparent;transform: none;}.collapse-icon{display: none;}@media (max-width: 768px) {.sidebar.canvas-tab-active {transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.sidebar.canvas-tab-active .sidebar-content {overflow-y: auto;-webkit-overflow-scrolling: touch;transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.sidebar.canvas-tab-active #canvas-tab {transition: height 0.3s ease;}#canvas-tab .settings-group {margin-bottom: 8px;border-radius: 8px;overflow: hidden;transition: all 0.3s ease;padding: 0;}.settings-group-header {display: flex;justify-content: space-between;align-items: center;padding: 12px 16px;cursor: pointer;user-select: none;transition: background-color 0.2s ease;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.settings-group-header:hover {background: rgba(255, 255, 255, 0.1);}.settings-group-header:active {background: rgba(255, 255, 255, 0.15);}.settings-group-header h3 {margin: 0;font-size: 14px;font-weight: 500;color: #fff;}.img-pro-btn{display: none;}.collapse-icon {font-size: 12px;transition: transform 0.3s ease;color: #666;min-width: 16px;text-align: center;display: block;}.settings-group-header[aria-expanded="true"] .collapse-icon {transform: rotate(180deg);}.settings-group-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease;padding: 0 16px;}.settings-group-content.expanded {max-height: 300px;padding: 12px 16px;}#canvas-tab .settings-group-content .input-row {margin-bottom: 0;gap: 8px;padding: 0;}#canvas-tab .settings-group-content .slider-row {margin-bottom: 8px;}#canvas-tab .settings-group-content .slider-row label {font-size: 13px;margin-bottom: 4px;}#canvas-tab .settings-group-content .input-row label {font-size: 13px;min-width: 50px;}#canvas-tab .settings-group[data-group="size"] .settings-group-content {display: flex;flex-direction: column;gap: 8px;}#canvas-tab .settings-group[data-group="size"] .input-row {margin-bottom: 0;}#canvas-tab .settings-group[data-group="grid"] .settings-group-content {display: flex;flex-direction: column;gap: 8px;}#canvas-tab .settings-group[data-group="grid"] .slider-row {margin-bottom: 0;}.settings-group-header:focus {outline: 2px solid rgba(102, 126, 234, 0.5);outline-offset: -2px;}.settings-group-header[aria-expanded="false"] + .settings-group-content:not(.expanded) {max-height: 0;padding: 0 16px;}.modal-footer{flex-direction: column;}}.size-controls {display: flex;flex-direction: column;gap: 16px;}.size-inputs {display: flex;align-items: center;gap: 12px;}.size-inputs input[type="number"] {flex: 1;padding: 14px 16px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 10px;background: rgba(255, 255, 255, 0.08);color: white;font-size: 14px;transition: all 0.3s ease;min-width: 0;}.size-inputs input[type="number"]:focus {outline: none;border-color: rgba(255, 255, 255, 0.4);background: rgba(255, 255, 255, 0.12);box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);}.size-inputs input[type="number"]::placeholder {color: rgba(255, 255, 255, 0.5);}.size-inputs span {color: rgba(255, 255, 255, 0.8);font-weight: 600;font-size: 16px;flex-shrink: 0;}.preset-sizes {display: grid;grid-template-columns: 1fr 1fr;gap: 8px;}.preset-btn {padding: 12px 16px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 10px;background: rgba(255, 255, 255, 0.06);color: rgba(255, 255, 255, 0.85);font-size: 13px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;position: relative;overflow: hidden;}.preset-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition: left 0.5s ease;}.preset-btn:hover::before {left: 100%;}.preset-btn:hover {background: rgba(255, 255, 255, 0.12);border-color: rgba(255, 255, 255, 0.3);color: white;transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);}.preset-btn.active {background: rgba(255, 255, 255, 0.15);border-color: rgba(255, 255, 255, 0.4);color: white;box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 4px 15px rgba(0, 0, 0, 0.2);font-weight: 600;}.download-info {margin-top: 16px;padding: 12px 16px;background: rgba(255, 255, 255, 0.05);border-radius: 8px;border: 1px solid rgba(255, 255, 255, 0.1);color: rgba(255, 255, 255, 0.9);font-size: 13px;font-weight: 500;}@media (max-width: 768px) {.modal-content {width: 95%;margin: 20px 0;}.modal-body {flex-direction: column;gap: 20px;padding: 20px;max-height: 50vh;}.download-preview {min-height: 180px;}.format-buttons {gap: 8px;}.modal-header, .modal-footer {padding: 20px;}.size-inputs {gap: 8px;}.size-inputs input[type="number"] {padding: 12px 14px;font-size: 16px;}.preset-sizes {grid-template-columns: 1fr 1fr;gap: 8px;}.preset-btn {padding: 12px 8px;font-size: 12px;}.size-inputs span {font-size: 14px;}.download-info {margin-top: 12px;padding: 10px 12px;font-size: 12px;}}#pro-btn {background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);color: #333;font-weight: 600;border: 1px solid rgba(246, 211, 101, 0.3);position: relative;overflow: hidden;}#pro-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left 0.5s;}#pro-btn:hover::before {left: 100%;}#pro-btn:hover {background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);transform: translateY(-1px);box-shadow: 0 4px 15px rgba(246, 211, 101, 0.4);border-color: rgba(246, 211, 101, 0.5);}.pro-text {font-size: 12px;font-weight: 700;letter-spacing: 0.5px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);}.pro-modal-content {max-width: 600px;width: 90%;max-height: 80vh;overflow-y: auto;transform: scale(0.8) translateY(-20px);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}#pro-modal.show .pro-modal-content {transform: scale(1) translateY(0);}#pro-modal {opacity: 0;transition: opacity 0.3s ease;}#pro-modal.show {opacity: 1;}.pro-intro {text-align: center;padding: 16px;background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));border-radius: 12px;border: 1px solid rgba(102, 126, 234, 0.2);}.pro-intro p {font-size: 16px;color: #4a5568;margin: 0;font-weight: 500;}.feature-comparison {margin: 24px 0;}.comparison-table {width: 100%;border-collapse: collapse;background: rgba(255, 255, 255, 0.8);border-radius: 12px;overflow: hidden;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}.comparison-table th, .comparison-table td {padding: 16px 12px;text-align: left;}.comparison-table th {background: linear-gradient(135deg, #667eea, #764ba2);color: white;font-weight: 600;font-size: 14px;text-transform: uppercase;letter-spacing: 0.5px;}.comparison-table th.pro-column {background: linear-gradient(135deg, #f6d365, #fda085);color: #333;position: relative;}.comparison-table th.pro-column::after {content: '✨';margin-left: 8px;}.comparison-table td {font-size: 14px;color: #4a5568;vertical-align: middle;}.comparison-table tr:nth-child(even) {background: rgba(248, 250, 252, 0.5);}.comparison-table tr:hover {background: rgba(102, 126, 234, 0.05);transition: all 0.2s ease;}.pro-feature {color: #2d3748;font-weight: 600;position: relative;background: linear-gradient(135deg, rgba(246, 211, 101, 0.1), rgba(253, 160, 133, 0.1));}.pro-feature::before {content: '✓';color: #38a169;font-weight: bold;margin-right: 8px;}.app-download-section {padding: 20px;background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));border-radius: 12px;border: 1px solid rgba(102, 126, 234, 0.1);}.app-info {display: flex;align-items: center;gap: 16px;}.app-icon {width: 64px;height: 64px;border-radius: 12px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}.app-details h4 {margin: 0 0 4px 0;font-size: 18px;font-weight: 600;color: #2d3748;}.app-details p {margin: 0 0 8px 0;font-size: 14px;color: #718096;}.app-rating {display: flex;align-items: center;gap: 8px;}.stars {color: #ffd700;font-size: 16px;}.rating-text {font-size: 14px;color: #4a5568;font-weight: 500;}.pro-download-btn {background: linear-gradient(135deg, #f6d365, #fda085) !important;color: #333 !important;font-weight: 600;text-decoration: none;display: inline-flex;align-items: center;justify-content: center;position: relative;overflow: hidden;}.pro-download-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left 0.5s;}.pro-download-btn:hover::before {left: 100%;}.pro-download-btn:hover {background: linear-gradient(135deg, #fda085, #f6d365) !important;transform: translateY(-1px);box-shadow: 0 6px 20px rgba(246, 211, 101, 0.4);}@media (max-width: 768px) {.pro-modal-content {width: 95%;max-height: 90vh;}.comparison-table th, .comparison-table td {padding: 12px 8px;font-size: 13px;}.app-info {flex-direction: column;text-align: center;gap: 12px;}.app-icon {width: 56px;height: 56px;}.pro-intro {padding: 12px;}.app-download-section {padding: 16px;}}@media (max-width: 480px) {.comparison-table {font-size: 12px;}.comparison-table th, .comparison-table td {padding: 10px 6px;}.pro-text {font-size: 11px;}}.website-footer {background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));border-top: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.website-footer::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));pointer-events: none;}.footer-content {max-width: 1200px;margin: 0 auto;padding: 60px 0 40px;display: grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap: 40px;position: relative;z-index: 1;}.footer-section {color: rgba(255, 255, 255, 0.9);}.footer-brand {display: flex;align-items: center;gap: 15px;margin-bottom: 20px;}.footer-logo {width: 48px;height: 48px;filter: brightness(1.1) contrast(1.1);}.footer-brand h3 {font-size: 24px;font-weight: 700;margin: 0;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.footer-brand p {font-size: 14px;margin: 0;opacity: 0.8;font-style: italic;}.footer-description {font-size: 16px;line-height: 1.6;opacity: 0.8;margin: 0;}.footer-section h4 {font-size: 18px;font-weight: 600;margin: 0 0 20px 0;color: white;background: linear-gradient(135deg, #ffffff, #e8f4fd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.footer-links {list-style: none;padding: 0;margin: 0;}.footer-links li {margin-bottom: 12px;}.footer-links a {color: rgba(255, 255, 255, 0.8);text-decoration: none;font-size: 15px;transition: all 0.3s ease;position: relative;display: inline-block;}.footer-links a::before {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background: linear-gradient(135deg, #3498db, #2980b9);transition: width 0.3s ease;}.footer-links a:hover {color: white;transform: translateX(5px);}.footer-links a:hover::before {width: 100%;}.footer-bottom {border-top: 1px solid rgba(255, 255, 255, 0.1);padding: 30px 40px;position: relative;z-index: 1;}.footer-bottom-content {max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20px;}.footer-bottom p {margin: 0;color: rgba(255, 255, 255, 0.7);font-size: 14px;}.footer-tagline {font-style: italic;opacity: 0.8;}@media (max-width: 1024px) {.footer-content {grid-template-columns: 1fr 1fr;gap: 30px;padding: 50px 30px 30px;}.footer-section:first-child {grid-column: 1 / -1;}}@media (max-width: 768px) {.footer-content {grid-template-columns: 1fr;gap: 30px;padding: 40px 20px 20px;text-align: center;}.footer-brand {justify-content: center;}.footer-bottom {padding: 20px;margin-bottom: 15px;}.footer-bottom-content {flex-direction: column;text-align: center;gap: 10px;}.footer-links a:hover {transform: none;}}@media (max-width: 480px) {.website-footer {margin-bottom: 50px;}.footer-content {padding: 30px 15px 15px;}.footer-brand h3 {font-size: 20px;}.footer-description {font-size: 14px;}.footer-section h4 {font-size: 16px;margin-bottom: 15px;}.footer-links a {font-size: 14px;}.footer-bottom {padding: 15px;}.footer-bottom p {font-size: 12px;}}@media (hover: none) {.gallery-image-container:hover {transform: none;box-shadow: none;border-color: rgba(255,255,255,.1);}.gallery-image, .gallery-image-container {-webkit-user-select: none;user-select: none;-webkit-touch-callout: none;-webkit-user-drag: none;}.image-gallery {touch-action: pan-x pinch-zoom;}}.gallery-image-container {will-change: transform;}.main-content.upActive .canvas-container {margin-top: 2% !important;}

/* Filter Styles */
.filter-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.filter-preset-btn {
    background: #3a4b5c;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: #fff;
    font-size: 12px;
}

.filter-preset-btn:hover {
    border-color: #7c86e1;
    background: #4a5b6c;
}

.filter-preset-btn.active {
    border-color: #7c86e1;
    background: #7c86e1;
}

.preset-preview {
    width: 60px;
    height: 40px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    border-radius: 4px;
    margin: 0 auto 5px;
    position: relative;
}

.preset-preview[data-preset="vintage"] { 
    filter: brightness(1.1) contrast(0.95) saturate(0.8) hue-rotate(10deg) sepia(0.2); 
}
.preset-preview[data-preset="black-white"] { 
    filter: contrast(1.1) grayscale(1); 
}
.preset-preview[data-preset="warm"] { 
    filter: brightness(1.05) saturate(1.2) hue-rotate(15deg) sepia(0.1); 
}
.preset-preview[data-preset="cool"] { 
    filter: brightness(0.95) contrast(1.05) saturate(1.1) hue-rotate(-10deg); 
}
.preset-preview[data-preset="dramatic"] { 
    filter: brightness(0.9) contrast(1.4) saturate(0.9); 
}
.preset-preview[data-preset="soft"] { 
    filter: brightness(1.1) contrast(0.85) saturate(0.95) hue-rotate(5deg) blur(0.5px) sepia(0.05); 
}
.preset-preview[data-preset="sharp"] { 
    filter: contrast(1.2) saturate(1.05); 
}

.filter-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-control label {
    min-width: 50px;
    font-size: 14px;
    color: #e0e6ed;
}

.filter-control input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #3a4b5c;
    outline: none;
    -webkit-appearance: none;
}

.filter-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #7c86e1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.filter-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #7c86e1;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.filter-value {
    min-width: 50px;
    font-size: 12px;
    color: #7c86e1;
    text-align: right;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.filter-actions .setting-btn {
    flex: 1;
}

.filter-import {
    margin-bottom: 20px;
}

.import-info {
    margin-top: 10px;
    font-size: 12px;
    color: #cdcfd3;
    line-height: 1.4;
}

.imported-filters h4 {
    margin: 10px 0;
    color: #e0e6ed;
    font-size: 14px;
}

#imported-filters-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.imported-filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #3a4b5c;
    border-radius: 6px;
    font-size: 13px;
}

.imported-filter-item button {
    background: #7c86e1;
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}

.imported-filter-item button:hover {
    background: #6b75d1;
}

.canvas-container.filtered {
    transition: filter 0.3s ease;
}

/* Mobile filter styles */
@media (max-width: 768px) {
    #filter-tab .filter-presets-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 10px;
    }
    
    #filter-tab .filter-preset-btn {
        padding: 6px 4px;
        font-size: 11px;
    }
    
    #filter-tab .preset-preview {
        width: 50px;
        height: 30px;
        margin-bottom: 3px;
    }

    #filter-tab .settings-group{
        padding: 0;
        margin-bottom: 10px;
    }
    
    #filter-tab .filter-controls {
        gap: 10px;
    }
    
    #filter-tab .filter-control {
        gap: 8px;
    }
    
    #filter-tab .filter-control label {
        min-width: 60px;
        font-size: 13px;
        color: #fff;
    }
    
    #filter-tab .filter-value {
        min-width: 40px;
        font-size: 11px;
        color: #fff;
    }
    
    #filter-tab .filter-actions {
        gap: 8px;
        margin-top: 10px;
        flex-direction: row;
    }
    
    #filter-tab .setting-btn {
        padding: 10px 8px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.8);
        color: #333;
        border: 1px solid rgba(102, 126, 234, 0.3);
    }
    
    #filter-tab .filter-import {
        margin-bottom: 15px;
    }
    
    #filter-tab .import-info {
        font-size: 11px;
        color: #fff;
        margin-top: 8px;
    }
    
    #filter-tab .imported-filters h4 {
        color: #fff;
        font-size: 13px;
        margin: 8px 0;
    }
    
    #filter-tab .imported-filter-item {
        font-size: 12px;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.2);
    }
    
    #filter-tab .imported-filter-item button {
        font-size: 10px;
        padding: 3px 6px;
    }
}

.upload-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(33, 150, 243, 0.9);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    gap: 8px;
    z-index: 10;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.upload-btn {
    position: relative;
    overflow: hidden;
}

.upload-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}