:root{--c-bg: #fbfbfd;--c-surface: #ffffff;--c-surface-secondary: #f5f5f7;--c-primary: #1d1d1f;--c-primary-light: #424245;--c-secondary: #86868b;--c-tertiary: #d2d2d7;--c-border: #e8e8ed;--c-border-light: #f0f0f5;--c-accent: #0071e3;--c-accent-hover: #0077ed;--c-accent-light: rgba(0, 113, 227, .08);--c-text-primary: #1d1d1f;--c-text-secondary: #86868b;--c-text-tertiary: #aeaeb2;--c-text-inverse: #ffffff;--c-overlay: rgba(0, 0, 0, .4);--c-overlay-light: rgba(0, 0, 0, .04);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--sp-16: 64px;--sp-20: 80px;--f-sans: -apple-system, "SF Pro Display", "SF Pro Text", "Noto Sans SC", "PingFang SC", "Helvetica Neue", sans-serif;--f-serif: "Noto Serif SC", "Songti SC", "STSong", serif;--f-mono: "SF Mono", "Menlo", "Consolas", monospace;--f-handwriting: "ZCOOL QingKe HuangYou", cursive;--fs-2xs: 10px;--fs-xs: 12px;--fs-sm: 13px;--fs-base: 15px;--fs-lg: 17px;--fs-xl: 20px;--fs-2xl: 24px;--fs-3xl: 28px;--fs-4xl: 34px;--fs-5xl: 48px;--fs-hero: 56px;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--lh-tight: 1.15;--lh-snug: 1.3;--lh-normal: 1.47;--lh-relaxed: 1.65;--r-xs: 4px;--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--r-xl: 18px;--r-2xl: 24px;--r-full: 980px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 2px 8px rgba(0, 0, 0, .06);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .08);--shadow-xl: 0 8px 32px rgba(0, 0, 0, .1);--shadow-float: 0 12px 40px rgba(0, 0, 0, .12);--t-fast: .12s ease;--t-normal: .24s ease;--t-slow: .4s ease;--t-spring: .36s cubic-bezier(.25, .46, .45, .94);--z-base: 0;--z-sticky: 100;--z-overlay: 200;--z-modal: 300;--z-toast: 400;--canvas-bg: #f5f5f7;--preview-padding: 20px}[data-theme=dark]{--c-bg: #000000;--c-surface: #1c1c1e;--c-surface-secondary: #2c2c2e;--c-primary: #f5f5f7;--c-primary-light: #d1d1d6;--c-secondary: #98989d;--c-tertiary: #48484a;--c-border: #38383a;--c-border-light: #2c2c2e;--c-accent: #0a84ff;--c-accent-hover: #409cff;--c-accent-light: rgba(10, 132, 255, .12);--c-text-primary: #f5f5f7;--c-text-secondary: #98989d;--c-text-tertiary: #636366;--c-text-inverse: #000000;--c-overlay: rgba(0, 0, 0, .6);--c-overlay-light: rgba(255, 255, 255, .04);--canvas-bg: #1c1c1e}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}html,body{height:100%;overflow:hidden}body{font-family:var(--f-sans);font-size:var(--fs-base);font-weight:var(--fw-regular);line-height:var(--lh-normal);color:var(--c-text-primary);background-color:var(--c-bg)}#app{height:100%;overflow:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:none;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{resize:none}ul,ol{list-style:none}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--c-tertiary);border-radius:var(--r-full)}::selection{background-color:var(--c-accent);color:var(--c-text-inverse)}.touch-action-pan{touch-action:pan-x pan-y}.touch-action-none{touch-action:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn var(--t-normal) ease both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp var(--t-normal) ease both}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.fade-in-down{animation:fadeInDown var(--t-normal) ease both}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scaleIn var(--t-normal) ease both}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.bounce{animation:bounce var(--t-fast) ease}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pulse{animation:pulse 1.5s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}.slide-up-enter-active,.slide-up-leave-active{transition:transform var(--t-normal),opacity var(--t-normal)}.slide-up-enter-from,.slide-up-leave-to{transform:translateY(100%);opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity var(--t-normal)}.fade-enter-from,.fade-leave-to{opacity:0}.list-enter-active,.list-leave-active{transition:all var(--t-normal)}.list-enter-from{opacity:0;transform:translateY(8px)}.list-leave-to{opacity:0;transform:translateY(-8px)}.list-move{transition:transform var(--t-normal)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app-container{display:flex;flex-direction:column;height:100%;height:100dvh;overflow:hidden;background-color:var(--c-bg)}.app-header{flex-shrink:0;background-color:#fbfbfdcc;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--c-border);z-index:var(--z-sticky)}.header-content{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);max-width:1200px;margin:0 auto}.header-subtitle{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--c-text-secondary);letter-spacing:-.01em}.mode-switcher{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-5);background-color:var(--c-surface-secondary);border-bottom:.5px solid var(--c-border-light)}.mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-secondary);background-color:transparent;border-radius:var(--r-full);transition:all var(--t-normal);letter-spacing:-.01em}.mode-btn.active{color:var(--c-text-primary);background-color:var(--c-surface);box-shadow:var(--shadow-sm)}.mode-btn:not(.active):active{transform:scale(.97)}.mode-btn-icon{font-size:var(--fs-base);line-height:1}.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.preview-area{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);background-color:var(--canvas-bg);overflow:hidden;min-height:0;position:relative}.preview-canvas-wrapper{position:relative;box-shadow:var(--shadow-float);border-radius:var(--r-sm);overflow:hidden;max-width:min(85%,360px);max-height:80%;display:flex;align-items:center;justify-content:center}.preview-canvas-wrapper canvas{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-12) var(--sp-6);color:var(--c-text-tertiary);text-align:center}.empty-state-icon{width:64px;height:64px;border-radius:var(--r-lg);background-color:var(--c-surface-secondary);display:flex;align-items:center;justify-content:center;font-size:28px}.empty-state-text{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--c-text-secondary)}.empty-state-hint{font-size:var(--fs-sm);color:var(--c-text-tertiary)}.control-panel{flex-shrink:0;background-color:var(--c-surface);border-top:.5px solid var(--c-border)}.tab-bar{display:flex;border-bottom:.5px solid var(--c-border-light)}.tab-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-3) var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-tertiary);transition:all var(--t-normal);border-bottom:2px solid transparent;letter-spacing:-.01em}.tab-item.active{color:var(--c-accent);border-bottom-color:var(--c-accent)}.tab-item:not(.active):active{transform:scale(.96)}.tab-item-icon{font-size:var(--fs-base);line-height:1}.panel-content{padding:var(--sp-4) var(--sp-5);max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch}.label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--c-text-secondary);margin-bottom:var(--sp-2);letter-spacing:.02em;text-transform:uppercase}.preset-list{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-2);-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}.preset-list::-webkit-scrollbar{display:none}.preset-card{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-1);border:1.5px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast);scroll-snap-align:start;width:72px}.preset-card:hover{border-color:var(--c-primary-light);transform:translateY(-1px)}.preset-card.active{border-color:var(--c-accent);background-color:var(--c-accent-light)}.preset-preview{width:100%;height:36px;border-radius:calc(var(--r-md) - 2px);display:flex;align-items:center;justify-content:center;overflow:hidden}.preset-text-sample{font-size:14px;font-weight:var(--fw-semibold);line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.1)}.preset-info{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:0 2px}.preset-name{font-size:10px;font-weight:var(--fw-semibold);color:var(--c-text-primary);line-height:1.3;text-align:center}.preset-desc{font-size:8px;color:var(--c-text-tertiary);line-height:1.2;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.section-divider{height:1px;background-color:var(--c-border-light);margin:var(--sp-3) 0}.color-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.color-swatch{width:28px;height:28px;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;transition:all var(--t-fast);outline:2px solid transparent;outline-offset:2px}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{outline-color:var(--c-accent)}.color-swatch-custom{position:relative;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)!important;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}.color-native-input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.color-custom-icon{font-size:11px;line-height:1;pointer-events:none}.gradient-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.gradient-swatch{width:44px;height:28px;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;transition:all var(--t-fast);outline:2px solid transparent;outline-offset:2px}.gradient-swatch:hover{transform:scale(1.08)}.gradient-swatch.active{outline-color:var(--c-accent)}.slider-group{display:flex;align-items:center;gap:var(--sp-3)}.slider-label{font-size:var(--fs-xs);color:var(--c-text-secondary);min-width:32px;flex-shrink:0}.slider-value{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--c-text-tertiary);min-width:28px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}input[type=range]{flex:1;height:4px;background-color:var(--c-tertiary);border-radius:var(--r-full);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background-color:var(--c-surface);border:.5px solid var(--c-tertiary);box-shadow:var(--shadow-md);cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:var(--shadow-lg)}input[type=range]::-webkit-slider-thumb:active{background-color:var(--c-accent);border-color:var(--c-accent)}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background-color:var(--c-surface);border:.5px solid var(--c-tertiary);cursor:pointer}.option-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}.option-chip{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);font-weight:var(--fw-medium);border-radius:var(--r-full);border:1px solid var(--c-border);color:var(--c-text-secondary);background-color:var(--c-surface);transition:all var(--t-fast);min-height:32px;display:inline-flex;align-items:center;letter-spacing:-.01em}.option-chip:hover{border-color:var(--c-primary-light)}.option-chip.active{border-color:var(--c-accent);background-color:var(--c-accent);color:var(--c-text-inverse)}.text-input-area{width:100%;padding:var(--sp-3);border:1px solid var(--c-border);border-radius:var(--r-md);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--c-text-primary);background-color:var(--c-surface-secondary);transition:border-color var(--t-normal),box-shadow var(--t-normal);min-height:60px}.text-input-area:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-light)}.text-input-area::placeholder{color:var(--c-text-tertiary)}.action-bar{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);background-color:var(--c-surface);border-top:.5px solid var(--c-border-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-medium);border-radius:var(--r-full);transition:all var(--t-normal);-webkit-user-select:none;user-select:none;white-space:nowrap;min-height:44px;letter-spacing:-.01em}.btn-primary{background-color:var(--c-accent);color:var(--c-text-inverse)}.btn-primary:hover:not(:disabled){background-color:var(--c-accent-hover)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn-primary:disabled{opacity:.4}.btn-secondary{background-color:var(--c-surface-secondary);color:var(--c-text-primary);border:1px solid var(--c-border)}.btn-secondary:hover:not(:disabled){background-color:var(--c-border-light)}.btn-secondary:active:not(:disabled){transform:scale(.97)}.btn-block{width:100%}.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-4);border:2px dashed var(--c-border);border-radius:var(--r-lg);color:var(--c-text-tertiary);transition:all var(--t-normal);cursor:pointer;min-height:120px}.upload-area:hover,.upload-area.dragover{border-color:var(--c-accent);color:var(--c-accent);background-color:var(--c-accent-light)}.upload-icon{font-size:28px;line-height:1}.upload-text{font-size:var(--fs-sm);font-weight:var(--fw-medium)}.toggle{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background-color:var(--c-tertiary);border-radius:var(--r-full);transition:background-color var(--t-normal)}.toggle-slider:before{content:"";position:absolute;height:22px;width:22px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;box-shadow:0 1px 3px #00000026;transition:transform var(--t-normal)}.toggle input:checked+.toggle-slider{background-color:var(--c-accent)}.toggle input:checked+.toggle-slider:before{transform:translate(18px)}.grid-template-list{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.grid-template-item{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-2);border:1.5px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast)}.grid-template-item:hover{border-color:var(--c-primary-light)}.grid-template-item.active{border-color:var(--c-accent);background-color:var(--c-accent-light)}.grid-template-item canvas{width:44px;height:44px}.grid-template-label{font-size:var(--fs-2xs);color:var(--c-text-secondary);font-weight:var(--fw-medium)}@media (min-width: 640px){.panel-content{max-height:260px}.preview-canvas-wrapper{max-width:min(75%,420px)}.header-content{padding:var(--sp-4) var(--sp-8)}.mode-switcher{padding:var(--sp-3) var(--sp-8)}}@media (min-width: 1024px){.app-main{flex-direction:row}.preview-area{flex:1;padding:var(--sp-10)}.preview-canvas-wrapper{max-width:min(60%,500px);max-height:85%}.control-panel{width:400px;flex-shrink:0;border-top:none;border-left:.5px solid var(--c-border)}.panel-content{max-height:none;overflow-y:auto;padding:var(--sp-5) var(--sp-6)}.action-bar{padding:var(--sp-4) var(--sp-6)}}@media (min-width: 1440px){.preview-canvas-wrapper{max-width:560px}}.single-canvas{display:block;max-width:100%;max-height:100%;cursor:grab;touch-action:none;border-radius:var(--r-sm)}.single-canvas:active{cursor:grabbing}.color-native-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.color-swatch-custom{position:relative;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)!important;display:flex;align-items:center;justify-content:center;cursor:pointer}.color-custom-icon{font-size:14px;line-height:1}.font-chip{font-size:var(--fs-lg);padding:var(--sp-2) var(--sp-4);min-width:60px;justify-content:center}.info-card{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);background-color:var(--c-surface-secondary);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--c-text-secondary)}.info-icon{font-size:var(--fs-base);line-height:1}.ratio-grid{display:flex;gap:var(--sp-3)}.ratio-item{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-2);border:1.5px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast);flex:1}.ratio-item:hover{border-color:var(--c-primary-light)}.ratio-item.active{border-color:var(--c-accent);background-color:var(--c-accent-light)}.ratio-icon{width:28px;max-height:36px;background-color:var(--c-tertiary);border-radius:2px;transition:background-color var(--t-fast)}.ratio-item.active .ratio-icon{background-color:var(--c-accent)}.ratio-label{font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--c-text-secondary)}.ratio-item.active .ratio-label{color:var(--c-accent)}.position-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}.position-item{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-2);border:1.5px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast)}.position-item:hover{border-color:var(--c-primary-light)}.position-item.active{border-color:var(--c-accent);background-color:var(--c-accent-light)}.position-preview{width:32px;height:32px;border-radius:3px;display:flex;gap:1px;padding:3px;background-color:var(--c-surface-secondary);overflow:hidden}.pos-img{background-color:var(--c-tertiary);border-radius:1px;transition:background-color var(--t-fast)}.position-item.active .pos-img{background-color:var(--c-accent)}.pos-text{background-color:var(--c-border);border-radius:1px}.pos-bottom{flex-direction:column}.pos-bottom .pos-img{flex:2}.pos-bottom .pos-text{flex:1}.pos-top{flex-direction:column}.pos-top .pos-img{flex:2;order:-1}.pos-top .pos-text{flex:1}.pos-left{flex-direction:row}.pos-left .pos-img{flex:2}.pos-left .pos-text{flex:1}.pos-right{flex-direction:row}.pos-right .pos-img{flex:2;order:1}.pos-right .pos-text{flex:1}.position-label{font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--c-text-secondary)}.position-item.active .position-label{color:var(--c-accent)}.single-editor{display:flex;flex-direction:column;height:100%;overflow:hidden}.text-input-bar{padding:var(--sp-2) var(--sp-5);background-color:var(--c-surface);border-bottom:.5px solid var(--c-border-light)}.text-input-field{width:100%;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-base);color:var(--c-text-primary);background-color:var(--c-surface-secondary);border:none;border-radius:var(--r-md);outline:none;transition:box-shadow var(--t-normal)}.text-input-field:focus{box-shadow:0 0 0 2px var(--c-accent)}.text-input-field::placeholder{color:var(--c-text-tertiary)}.action-bar{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);background-color:var(--c-surface);border-top:.5px solid var(--c-border-light)}@media (min-width: 1024px){.single-editor{flex-direction:row}.preview-area{flex:1}.control-panel{width:400px;flex-shrink:0;border-top:none;border-left:.5px solid var(--c-border)}.action-bar{grid-template-columns:1fr 1fr}}.multi-canvas{display:block;max-width:100%;max-height:100%;touch-action:none}.grid-template-thumb{width:44px;height:44px;border-radius:2px}.collage-template-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}.collage-template-item{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border:2px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast)}.collage-template-item:hover{border-color:var(--c-primary-light)}.collage-template-item.active{border-color:var(--c-accent);background-color:var(--c-overlay-light)}.collage-template-preview{width:100%;aspect-ratio:1;background-color:var(--c-bg);border-radius:var(--r-sm);display:flex;gap:2px;padding:4px;overflow:hidden}.collage-cell{background-color:var(--c-tertiary);border-radius:2px;flex:1}.collage-magazine{flex-direction:row}.collage-magazine .collage-cell:first-child{flex:2}.collage-magazine .collage-cell:nth-child(2),.collage-magazine .collage-cell:nth-child(3){flex:1}.collage-minimal{flex-direction:column;padding:8px;gap:6px}.collage-minimal .collage-cell:first-child{flex:3}.collage-minimal .collage-cell:nth-child(2),.collage-minimal .collage-cell:nth-child(3){flex:1}.collage-polaroid{flex-direction:column;gap:4px;padding:3px}.collage-polaroid .collage-cell{flex:1;border:2px solid var(--c-surface);border-bottom:8px solid var(--c-surface)}.collage-waterfall{flex-direction:row;gap:2px;padding:3px}.collage-waterfall .collage-cell:first-child{flex:1;align-self:flex-start;height:60%}.collage-waterfall .collage-cell:nth-child(2){flex:1;align-self:flex-end;height:80%}.collage-waterfall .collage-cell:nth-child(3){flex:1;align-self:flex-start;height:50%}.collage-template-info{display:flex;flex-direction:column;align-items:center;gap:2px}.collage-template-name{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--c-text-primary)}.collage-template-desc{font-size:var(--fs-2xs);color:var(--c-text-tertiary)}.multi-editor{display:flex;flex-direction:column;height:100%;overflow:hidden}.image-strip{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-5);background-color:var(--c-surface);border-top:.5px solid var(--c-border-light);overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}.image-strip-item{position:relative;width:44px;height:44px;flex-shrink:0;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color var(--t-fast)}.image-strip-item.active{border-color:var(--c-accent)}.image-strip-item img{width:100%;height:100%;object-fit:cover}.image-strip-remove{position:absolute;top:-4px;right:-4px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:9px;background-color:#0009;color:#fff;border-radius:var(--r-full);opacity:0;transition:opacity var(--t-fast)}.image-strip-item:hover .image-strip-remove{opacity:1}.image-strip-add{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--c-border);border-radius:var(--r-sm);color:var(--c-text-tertiary);font-size:18px;font-weight:var(--fw-light);cursor:pointer;transition:all var(--t-fast)}.image-strip-add:hover{border-color:var(--c-accent);color:var(--c-accent)}.upload-input{display:none}.empty-state{cursor:pointer;transition:transform var(--t-normal)}.empty-state:hover{transform:scale(1.02)}.empty-state:active{transform:scale(.98)}.action-bar{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}.action-bar .btn{border-radius:var(--r-lg);font-size:var(--fs-base)}@media (min-width: 1024px){.multi-editor{flex-direction:row}.preview-area{flex:1}.control-panel{width:400px;flex-shrink:0;border-top:none;border-left:.5px solid var(--c-border)}}.header-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-5);max-width:1200px;margin:0 auto}.header-title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--c-text-primary);letter-spacing:-.022em}.header-nav{display:flex;gap:var(--sp-1)}.nav-link{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-secondary);border-radius:var(--r-full);transition:all var(--t-normal);letter-spacing:-.01em}.nav-link:hover{color:var(--c-text-primary);background-color:var(--c-overlay-light)}.nav-link.active{color:var(--c-text-primary);background-color:var(--c-surface-secondary)}.nav-link:active{transform:scale(.96)}@media (min-width: 1024px){.header-inner{padding:var(--sp-3) var(--sp-8)}.header-title{font-size:var(--fs-xl)}.nav-link{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-base)}}
