:root{--color-primary: #7C3AED;--color-primary-light: #A78BFA;--color-primary-dark: #5B21B6;--color-secondary: #06B6D4;--color-secondary-light: #22D3EE;--color-secondary-dark: #0891B2;--color-accent: #F59E0B;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-bg-primary: #F9FAFB;--color-bg-secondary: #F3F4F6;--color-bg-tertiary: #FFFFFF;--color-bg-overlay: rgba(0, 0, 0, .6);--color-text-primary: #111827;--color-text-secondary: #6B7280;--color-text-tertiary: #9CA3AF;--color-text-inverse: #FFFFFF;--color-border: #E5E7EB;--color-border-light: #F3F4F6;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-display: "Poppins", "Inter", var(--font-sans);--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);color:var(--color-text-primary);background:var(--color-bg-primary);line-height:1.6;overflow-x:hidden;width:100%;max-width:100vw}#root{overflow-x:hidden;width:100%;max-width:100vw}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-text-tertiary);border-radius:var(--radius-full);transition:background var(--transition-base)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--spacing-lg)}.section{padding:var(--spacing-3xl) 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);font-size:var(--text-base);font-weight:600;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);outline:none;text-decoration:none;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-text-inverse);box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:2px solid var(--color-border)}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.card{background:var(--color-bg-tertiary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-base);overflow:hidden}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.card-body{padding:var(--spacing-lg)}.input{width:100%;padding:var(--spacing-md);font-size:var(--text-base);font-family:var(--font-sans);color:var(--color-text-primary);background:var(--color-bg-tertiary);border:2px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:all var(--transition-base)}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px #ff6b9d1a}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fade-in{animation:fadeIn var(--transition-slow) ease-out}.animate-slide-up{animation:slideInUp var(--transition-slow) ease-out}@media(max-width:768px){:root{--text-3xl: 24px;--text-4xl: 28px;--spacing-2xl: 32px;--spacing-3xl: 48px}.container{padding:0 var(--spacing-md);max-width:100%;overflow-x:hidden}.section{padding:var(--spacing-2xl) 0}.btn{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--text-sm)}}@media(max-width:480px){html{font-size:14px}.container{padding:0 var(--spacing-sm)}}@media(hover:none)and (pointer:coarse){.btn{min-height:44px;min-width:44px}.card:hover{transform:none}.card:active{transform:scale(.98)}}@media(prefers-color-scheme:dark){:root{--color-bg-primary: #0f1419;--color-bg-secondary: #1a1f28;--color-bg-tertiary: #242b36;--color-text-primary: #e7e9ea;--color-text-secondary: #8b98a5;--color-text-tertiary: #5b6976;--color-border: #2f3841;--color-border-light: #252d37}}.slider-container{margin-bottom:var(--spacing-lg)}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.slider-label{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary)}.slider-icon{font-size:var(--text-lg)}.slider-value-display{font-size:var(--text-sm);font-weight:700;color:var(--color-primary);min-width:50px;text-align:right;font-variant-numeric:tabular-nums}.slider-track-wrapper{position:relative}.slider-input{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--color-border-light) 0%,var(--color-border-light) 50%,var(--color-border-light) 50%,var(--color-border-light) 100%);border-radius:var(--radius-full);outline:none;transition:all var(--transition-base);cursor:pointer}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:50%;cursor:grab;box-shadow:var(--shadow-md);transition:all var(--transition-base)}.slider-input::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:50%;cursor:grab;border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base)}.slider-input:hover::-webkit-slider-thumb{transform:scale(1.2);box-shadow:var(--shadow-lg)}.slider-input:hover::-moz-range-thumb{transform:scale(1.2);box-shadow:var(--shadow-lg)}.slider-input.dragging::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.3);box-shadow:0 0 0 8px #ff6b9d33}.slider-input.dragging::-moz-range-thumb{cursor:grabbing;transform:scale(1.3);box-shadow:0 0 0 8px #ff6b9d33}.slider-markers{display:flex;justify-content:space-between;margin-top:var(--spacing-xs);padding:0 2px}.marker{font-size:10px;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.marker.center{color:var(--color-text-secondary);font-weight:600}.slider-reset{position:absolute;right:0;top:0;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--color-text-secondary);transition:all var(--transition-base)}.slider-reset:hover{background:var(--color-primary-light);color:#fff;border-color:var(--color-primary);transform:rotate(180deg)}@media(max-width:768px){.slider-input::-webkit-slider-thumb{width:32px;height:32px}.slider-input::-moz-range-thumb{width:32px;height:32px}.slider-container{padding:var(--spacing-lg) 0;margin-bottom:var(--spacing-md)}.slider-input{height:10px;pointer-events:none;touch-action:pan-y}.slider-input::-webkit-slider-thumb{pointer-events:auto;box-shadow:0 0 0 8px transparent}.slider-input::-moz-range-thumb{pointer-events:auto}.slider-input:hover::-webkit-slider-thumb{transform:none}.slider-input:hover::-moz-range-thumb{transform:none}.slider-input:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 12px #7c3aed1a}.slider-input:active::-moz-range-thumb{transform:scale(1.15)}.slider-label{font-size:var(--text-base);font-weight:700}}.advanced-filters{background:var(--color-bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.filters-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--color-border)}.filters-header h3{font-size:var(--text-xl);font-weight:700;color:var(--color-text-primary);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.filters-header h3:before{content:"🎨";font-size:var(--text-2xl)}.reset-all-btn{padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,var(--color-error) 0%,#d63447 100%);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.reset-all-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.reset-all-btn:active{transform:translateY(0)}.filters-grid{display:flex;flex-direction:column;gap:var(--spacing-md)}.filter-preview-hint{margin-top:var(--spacing-lg);padding:var(--spacing-md);background:linear-gradient(135deg,#ff6b9d0d,#4a90e20d);border-radius:var(--radius-md);border-left:4px solid var(--color-primary);display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--text-sm);color:var(--color-text-secondary)}.hint-icon{font-size:var(--text-lg);animation:pulse 2s ease-in-out infinite}@media(max-width:768px){.advanced-filters{padding:var(--spacing-md)}.filters-header h3{font-size:var(--text-lg)}}.template-gallery{background:var(--color-bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-sm)}.gallery-header{margin-bottom:var(--spacing-lg)}.gallery-header h3{font-size:var(--text-2xl);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--spacing-xs) 0}.gallery-subtitle{color:var(--color-text-secondary);font-size:var(--text-sm);margin:0}.count-selector{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);flex-wrap:wrap}.count-btn{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base)}.count-btn:hover{border-color:var(--color-primary-light);color:var(--color-primary);transform:translateY(-2px)}.count-btn.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-md)}.template-card{background:var(--color-bg-secondary);border:2px solid transparent;border-radius:var(--radius-lg);padding:var(--spacing-md);cursor:pointer;transition:all var(--transition-base);display:flex;flex-direction:column;gap:var(--spacing-sm)}.template-card:hover{border-color:var(--color-primary-light);transform:translateY(-4px);box-shadow:var(--shadow-md)}.template-card.active{border-color:var(--color-primary);background:linear-gradient(135deg,#ff6b9d1a,#ff6b9d0d);box-shadow:0 0 0 4px #ff6b9d33}.template-preview{position:relative;width:100%;aspect-ratio:1;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}.template-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--text-4xl);opacity:.1;z-index:0}.template-layout{position:relative;width:100%;height:100%;z-index:1}.layout-cell{box-sizing:border-box}.cell-inner{width:100%;height:100%;background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-secondary-light) 100%);border-radius:2px;opacity:.6;transition:opacity var(--transition-base)}.template-card:hover .cell-inner{opacity:.8}.template-card.active .cell-inner{opacity:1;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%)}.template-name{text-align:center;font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary)}.template-card.active .template-name{color:var(--color-primary)}@media(max-width:768px){.template-gallery{padding:var(--spacing-lg)}.templates-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--spacing-sm)}.template-card{padding:var(--spacing-sm)}}.collage-cell{box-sizing:border-box;position:relative;overflow:hidden}.collage-canvas-wrapper{width:100%;display:flex;justify-content:center;align-items:center;background:linear-gradient(45deg,#F3F4F6 25%,transparent 25%,transparent 75%,#F3F4F6 75%,#F3F4F6),linear-gradient(45deg,#F3F4F6 25%,transparent 25%,transparent 75%,#F3F4F6 75%,#F3F4F6);background-size:20px 20px;background-position:0 0,10px 10px;border-radius:var(--radius-lg);padding:var(--spacing-lg);min-height:400px}.collage-canvas{position:relative;box-shadow:var(--shadow-xl);border-radius:var(--radius-md);max-width:100%;width:100%;aspect-ratio:1 / 1;height:auto!important}.collage-cell{box-sizing:border-box}.collage-image{display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.collage-empty{width:100%;height:400px;display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary);font-size:var(--text-lg)}@media(max-width:768px){.collage-canvas-wrapper{padding:var(--spacing-md)}.collage-canvas{max-width:100%}}.collage-controls{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.controls-title{font-size:var(--text-lg);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--spacing-lg) 0;display:flex;align-items:center;gap:var(--spacing-sm)}.control-group{margin-bottom:var(--spacing-lg)}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary)}.control-value{color:var(--color-primary);font-variant-numeric:tabular-nums}.control-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--color-border-light),var(--color-border-light));border-radius:var(--radius-full);outline:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border-radius:50%;cursor:grab;box-shadow:var(--shadow-md);transition:all var(--transition-base)}.control-slider::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border-radius:50%;cursor:grab;border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base)}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-slider::-moz-range-thumb:hover{transform:scale(1.2)}.color-presets{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.color-preset{width:36px;height:36px;border-radius:var(--radius-md);border:3px solid transparent;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.color-preset:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.color-preset.active{border-color:var(--color-primary);box-shadow:0 0 0 2px #7c3aed33}.color-picker{width:36px;height:36px;border-radius:var(--radius-md);border:2px solid var(--color-border);cursor:pointer;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-md) - 2px)}.controls-hint{margin-top:var(--spacing-lg);padding:var(--spacing-md);background:linear-gradient(135deg,#7c3aed0d,#7c3aed05);border-radius:var(--radius-md);border-left:4px solid var(--color-primary);font-size:var(--text-sm);color:var(--color-text-secondary)}.background-types{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.type-btn{flex:1;min-width:80px;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background:#fff;color:var(--color-text-primary);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base)}.type-btn:hover{border-color:var(--color-primary);background:#7c3aed0d}.type-btn.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}@media(max-width:768px){.collage-controls{padding:var(--spacing-md)}.controls-title{font-size:var(--text-base)}.color-preset,.color-picker{width:32px;height:32px}.type-btn{font-size:12px;padding:var(--spacing-xs) var(--spacing-sm)}}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#fafbfc,#f3f4f6)}.header{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;padding:var(--spacing-xl) 0;box-shadow:0 4px 20px #7c3aed26;position:sticky;top:0;z-index:var(--z-sticky)}.header-content{text-align:center}.logo{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xs)}.logo-icon{width:36px;height:36px;animation:sparkle 3s ease-in-out infinite}@keyframes sparkle{0%,to{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(180deg) scale(1.1);opacity:.9}}.logo h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;margin:0;letter-spacing:-.5px}.tagline{font-size:var(--text-base);opacity:.95;font-weight:400}.main{flex:1;padding:var(--spacing-2xl) 0}.upload-area{background:#fff;border:2px dashed #D1D5DB;border-radius:var(--radius-xl);padding:var(--spacing-3xl);text-align:center;transition:all var(--transition-base);cursor:pointer;min-height:450px;display:flex;align-items:center;justify-content:center}.upload-area:hover{border-color:#7c3aed;background:linear-gradient(135deg,#7c3aed05,#7c3aed0d);transform:translateY(-2px);box-shadow:0 8px 24px #7c3aed1f}.upload-content{max-width:400px}.upload-icon-wrapper{display:inline-flex;padding:var(--spacing-xl);background:linear-gradient(135deg,#a78bfa,#7c3aed);border-radius:var(--radius-full);margin-bottom:var(--spacing-lg)}.upload-icon{width:48px;height:48px;color:#fff}.upload-content h2{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.upload-content>p{color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);font-size:var(--text-base)}.upload-hint{margin-top:var(--spacing-lg);font-size:var(--text-sm);color:var(--color-text-tertiary)}.mode-switcher{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);background:#fff;padding:var(--spacing-xs);border-radius:var(--radius-lg);box-shadow:0 2px 8px #0000000a}.mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:transparent;border:none;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base)}.mode-btn:hover{background:#f3f4f6;color:var(--color-text-primary)}.mode-btn.active{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;box-shadow:0 4px 12px #7c3aed40}.editor-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--spacing-xl);min-height:650px}.image-grid{background:#fff;border-radius:var(--radius-lg);box-shadow:0 2px 8px #0000000a;display:flex;flex-direction:column;height:fit-content}.grid-header{padding:var(--spacing-lg);border-bottom:1px solid #E5E7EB;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(124,58,237,.03) 0%,transparent 100%);flex-shrink:0}.grid-header h3{font-size:var(--text-lg);font-weight:600;margin:0;color:var(--color-text-primary)}.btn-sm{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm)}.grid-content{padding:var(--spacing-md);display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-content:flex-start}.grid-item{flex:0 0 calc(50% - var(--spacing-md) / 2);aspect-ratio:1 / 1;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;position:relative;border:2px solid transparent;transition:all var(--transition-base);background:#f3f4f6}.grid-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform var(--transition-base)}.grid-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.grid-item:hover img{transform:scale(1.05)}.grid-item-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-base);color:#fff;z-index:1}.grid-item:hover .grid-item-overlay{opacity:1}.grid-item.active{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed33}.editor-panel{background:#fff;border-radius:var(--radius-lg);box-shadow:0 2px 8px #0000000a;padding:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xl)}.preview-area{background:linear-gradient(45deg,#F3F4F6 25%,transparent 25%,transparent 75%,#F3F4F6 75%,#F3F4F6),linear-gradient(45deg,#F3F4F6 25%,transparent 25%,transparent 75%,#F3F4F6 75%,#F3F4F6);background-size:20px 20px;background-position:0 0,10px 10px;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16 / 10;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 20px #0000000d}.preview-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 8px 32px #0000001f}.filter-section{border-top:1px solid #E5E7EB;padding-top:var(--spacing-lg)}.filter-section h3{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-text-primary)}.filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:var(--spacing-sm)}.filter-item{background:#f9fafb;border:2px solid transparent;border-radius:var(--radius-md);padding:var(--spacing-xs);cursor:pointer;transition:all var(--transition-base);display:flex;flex-direction:column;gap:var(--spacing-xs)}.filter-item:hover{border-color:#a78bfa;transform:translateY(-2px);box-shadow:0 4px 8px #7c3aed1a}.filter-item.active{border-color:#7c3aed;background:linear-gradient(135deg,#7c3aed14,#7c3aed0a);box-shadow:0 0 0 2px #7c3aed1a}.filter-preview{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(45deg,#F3F4F6 25%,transparent 25%,transparent 75%,#F3F4F6 75%,#F3F4F6),linear-gradient(45deg,#F3F4F6 25%,transparent 25%,transparent 75%,#F3F4F6 75%,#F3F4F6);background-size:8px 8px;background-position:0 0,4px 4px}.filter-preview img{width:100%;height:100%;object-fit:cover}.filter-name{font-size:11px;font-weight:600;text-align:center;color:var(--color-text-secondary)}.filter-item.active .filter-name{color:#7c3aed}.action-buttons{display:flex;gap:var(--spacing-md);padding-top:var(--spacing-lg);border-top:1px solid #E5E7EB}.action-buttons .btn{flex:1}.collage-layout{display:grid;grid-template-columns:380px 1fr;gap:var(--spacing-xl);min-height:650px}.collage-sidebar{max-height:750px;overflow-y:auto}.collage-main{background:#fff;border-radius:var(--radius-lg);box-shadow:0 2px 8px #0000000a;padding:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xl)}.collage-actions{display:flex;flex-direction:column;gap:var(--spacing-md);align-items:center}.collage-hint{font-size:var(--text-sm);color:var(--color-text-secondary);margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:var(--color-text-tertiary);gap:var(--spacing-md)}.empty-icon{opacity:.3;animation:pulse 2s ease-in-out infinite}.footer{background:#fff;border-top:1px solid #E5E7EB;padding:var(--spacing-xl) 0;text-align:center;color:var(--color-text-secondary);margin-top:auto}@media(max-width:1024px){.editor-layout{grid-template-columns:240px 1fr}.collage-layout{grid-template-columns:320px 1fr}}@media(max-width:768px){.header{padding:var(--spacing-sm) 0}.logo h1{font-size:var(--text-lg)}.logo-icon{width:28px;height:28px;animation:none!important}.tagline{font-size:var(--text-sm)}.mode-switcher{flex-direction:row;gap:var(--spacing-xs)}.mode-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm)}.editor-layout,.collage-layout{grid-template-columns:1fr;gap:var(--spacing-md);min-height:auto;display:flex;flex-direction:column;flex:1}.image-grid{display:none}.editor-panel{width:100%;max-width:100%;overflow-x:hidden;display:flex;flex-direction:column;flex:1}.collage-main{flex:1;display:flex;flex-direction:column}.preview-area{flex:0 0 auto;aspect-ratio:1 / 1;width:100%;max-width:100%}.app,.main,.container,.editor-layout,.collage-layout{max-width:100%;overflow-x:hidden}.main{display:flex;flex-direction:column;flex:1}.container{width:100%;flex:1;display:flex;flex-direction:column}.upload-area{padding:var(--spacing-xl);min-height:350px}.filter-grid{grid-template-columns:repeat(3,1fr);gap:6px}.filter-item{padding:4px;transition:none;aspect-ratio:1}.filter-item:hover{transform:none;box-shadow:none}.filter-name{font-size:10px}.action-buttons{flex-direction:column;gap:var(--spacing-sm)}.action-buttons .btn{width:100%}*{animation-duration:0s!important;transition-duration:0s!important}[data-framer-component-type]{animation:none!important;transition:none!important}.editor-panel{-webkit-overflow-scrolling:touch}img{display:block;max-width:100%;height:auto}.filter-preview{aspect-ratio:1;background:#f3f4f6}.filter-preview img{width:100%;height:100%;object-fit:cover}}@media(max-width:480px){.main{padding:var(--spacing-lg) 0}.upload-area{padding:var(--spacing-lg);min-height:300px}.upload-content h2{font-size:var(--text-xl)}.image-grid{max-height:280px}.grid-content{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm);grid-auto-rows:1fr}.grid-item{flex:0 0 calc(50% - var(--spacing-sm) / 2)}.editor-panel,.collage-main{padding:var(--spacing-md)}.filter-grid{grid-template-columns:repeat(3,1fr)}.preview-area{aspect-ratio:4 / 3}}@media(hover:none)and (pointer:coarse){.grid-item:hover{transform:none}.grid-item:active{transform:scale(.98)}.grid-item-overlay{opacity:0}.grid-item.active .grid-item-overlay{opacity:1}.upload-area:hover{transform:none}.upload-area:active{transform:scale(.99)}.filter-item,.mode-btn{min-height:44px}}