*{margin:0; padding:0; box-sizing:border-box}html,body{margin:0; padding:0; height:100%}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; line-height:1.6; color:#333; background-color:#f8f9fa}.container{max-width:1200px; margin:0 auto; padding:0 20px}h1,h2,h3,h4,h5,h6{font-weight:600; line-height:1.2; margin-bottom:1rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}p{margin-bottom:1rem; color:#666}.btn{display:inline-flex; align-items:center; gap:0.5rem; padding:12px 24px; border:none; border-radius:8px; font-size:1rem; font-weight:500; text-decoration:none; cursor:pointer; transition:all 0.3s ease; background:none}.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white}.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 25px rgba(102,126,234,0.3)}.btn-secondary{background:white; color:#667eea; border:2px solid #667eea}.btn-secondary:hover{background:#667eea; color:white; transform:translateY(-2px)}.header{background:white; box-shadow:0 2px 10px rgba(0,0,0,0.1); position:sticky; top:0; z-index:1000; transition:box-shadow 0.3s ease}.header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,0.15),0 2px 8px rgba(0,0,0,0.1)}.header .container{display:flex; justify-content:space-between; align-items:center; padding:1rem 20px}.header-tagline{color:#64748b; font-weight:400; font-size:0.9rem; white-space:nowrap; letter-spacing:0.3px; margin-right:1px}@media (max-width:480px){.header-tagline{font-size:0.8rem; padding:4px 10px}}.logo{display:flex; align-items:center; gap:0.5rem; color:#667eea}.logo i{font-size:2rem}.logo h1{font-size:1.5rem; margin:0}.nav{display:flex; gap:2rem}.nav-link{text-decoration:none; color:#666; font-weight:500; transition:color 0.3s ease; padding:0.5rem 0; border-bottom:2px solid transparent}.nav-link:hover,.nav-link.active{color:#667eea; border-bottom-color:#667eea}.hero{padding:3rem 0; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; text-align:center}.hero .container{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}.hero-content h2{font-size:3rem; margin-bottom:1rem; color:white}.hero-content p{font-size:1.2rem; margin-bottom:2rem; color:rgba(255,255,255,0.9)}.hero-buttons{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; flex-direction:column; align-items:center}.hero-subtitle{margin:10px 0 0 0; font-size:14px !important; background:linear-gradient(135deg,rgba(255,255,255,0.9),rgb(166 219 164 / 80%),rgb(255 175 194)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent; text-align:center; line-height:1.4}.hero .btn-primary{background:#ffffff; color:#4f46e5; border:2px solid #ffffff; padding:18px 62px; font-size:1.4rem; font-weight:800; border-radius:999px; box-shadow:0 10px 24px rgba(0,0,0,0.18),0 2px 6px rgba(255,255,255,0.25)}.hero .btn-primary:hover{background:#f1f5ff; color:#4338ca; border-color:#f1f5ff; transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,0.22),0 4px 10px rgba(255,255,255,0.25)}.hero-screenshot{width:100%; max-width:560px; margin:0 auto; border-radius:8px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.15); border:1px solid rgba(255,255,255,0.25); padding:5px; background:rgba(255,255,255,0.6); transform:none; transition:transform 0.4s ease,box-shadow 0.4s ease; will-change:transform; backdrop-filter:saturate(1.1)}.hero-screenshot:hover{transform:scale(1.02); box-shadow:0 28px 60px rgba(0,0,0,0.28),0 10px 24px rgba(0,0,0,0.16)}.hero-screenshot img{display:block; width:100%; height:auto; border-radius:6px}@media (max-width:768px){.hero .container{gap:0}.hero-screenshot{margin:0 auto 1rem auto; width:70%; max-width:none; border-radius:35px}.hero-screenshot img{border-radius:12px}}.demo-photo{aspect-ratio:1; background-size:cover; background-position:center; border-radius:8px; border:3px solid rgba(255,255,255,0.3)}.hero-template-preview svg{width:100%; height:100%}.home-templates-list{display:flex; flex-direction:column; gap:2rem}.home-templates-section{background:#ffffff; border:1px solid #eee; border-radius:12px; padding:1.25rem 1.25rem 1rem}.home-templates-title{font-size:1.25rem; color:#333; margin-bottom:1rem}.home-templates-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem}.home-template-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; padding:1rem; border:2px solid #eee; border-radius:10px; background:#fff; cursor:pointer; transition:all 0.2s ease}.home-template-card:hover{border-color:#667eea; box-shadow:0 6px 18px rgba(102,126,234,0.15); transform:translateY(-2px)}.home-template-card .template-preview{width:96px; height:72px}.home-template-caption{font-size:0.9rem; color:#666; text-align:center}.features-section{padding:4rem 0; background:#f8f9fa}.features-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem}.feature-item{text-align:center; background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 8px 20px rgba(0,0,0,0.06); border:1px solid #eee}.feature-icon{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; font-size:1.25rem; margin:0 auto 0.75rem}.upload-section{padding:4rem 0; background:white}.upload-area{border:3px dashed #ddd; border-radius:12px; padding:3rem; text-align:center; transition:all 0.3s ease; background:#fafafa}.upload-area:hover{border-color:#667eea; background:#f0f4ff}.upload-area.dragover{border-color:#667eea; background:#e8f2ff; transform:scale(1.02)}.upload-content i{font-size:4rem; color:#667eea; margin-bottom:1rem}.upload-content h3{margin-bottom:0.5rem}.template-selection{margin-top:3rem; text-align:center}.template-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem; max-width:800px; margin-left:auto; margin-right:auto}.template-item{cursor:pointer; padding:1rem; border:2px solid #eee; border-radius:8px; transition:all 0.3s ease; background:white}.template-item:hover{border-color:#667eea; transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,0.1)}.template-item.selected{border-color:#667eea; background:#f0f4ff}.template-preview{display:grid; grid-template-columns:1fr 1fr; gap:4px; height:60px}.template-preview.vertical{grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr}.template-preview.custom{display:flex; align-items:center; justify-content:center; font-size:2rem; color:#667eea}.preview-cell{background:#e0e0e0; border-radius:4px}.template-item span{font-size:0.9rem; color:#666}.editor-section{padding:3rem 0; background:#f8f9fa}.editor-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:1rem}.editor-controls{display:flex; gap:1rem}.quick-template-panel{background:white; border-radius:12px; padding:1.5rem; margin-bottom:2rem; box-shadow:0 2px 10px rgba(0,0,0,0.1)}.quick-template-panel h4{margin-bottom:1rem; color:#333; font-size:1.1rem}.quick-template-grid{display:flex; gap:1rem; flex-wrap:wrap}.quick-template-item{display:flex; flex-direction:column; align-items:center; padding:0.75rem; border:2px solid #eee; border-radius:8px; background:white; cursor:pointer; transition:all 0.3s ease; min-width:80px; -webkit-tap-highlight-color:transparent; user-select:none; touch-action:manipulation}.quick-template-item:hover{border-color:#667eea}.quick-template-item.selected{border-color:#667eea; background:#f0f4ff}.quick-template-item i{font-size:1.5rem; color:#667eea; margin-bottom:0.5rem}.quick-template-item span{font-size:0.8rem; color:#666; font-weight:500}.mini-preview{display:grid; grid-template-columns:1fr 1fr; gap:2px; width:24px; height:18px; margin-bottom:0.5rem}.mini-preview.horizontal{grid-template-columns:1fr 1fr 1fr; width:30px; height:12px}.mini-preview.vertical{grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr; width:12px; height:24px}.mini-cell{background:#667eea; border-radius:1px}.collage-canvas{background:white; border-radius:12px; padding:2rem; box-shadow:0 5px 20px rgba(0,0,0,0.1); min-height:500px; position:relative; overflow:hidden}.collage-item{position:absolute; top:0; left:0; cursor:move; border:2px solid transparent; transition:border-color 0.3s ease; background-size:cover; background-position:center; will-change:transform; transform-origin:top left}.collage-item:hover{border-color:#667eea}.collage-item.selected{border-color:#667eea; z-index:10}.collage-item.dragging{z-index:100; pointer-events:none}.collage-item.resizing{z-index:100}.resize-handle{position:absolute; width:10px; height:10px; background:#667eea; border:2px solid white; border-radius:50%; cursor:nw-resize; opacity:0; transition:opacity 0.3s ease; z-index:20}.collage-item:hover .resize-handle,.collage-item.selected .resize-handle{opacity:1}.resize-handle.nw{top:-7px; left:-7px; cursor:nw-resize}.resize-handle.ne{top:-7px; right:-7px; cursor:ne-resize}.resize-handle.sw{bottom:-7px; left:-7px; cursor:sw-resize}.resize-handle.se{bottom:-7px; right:-7px; cursor:se-resize}.resize-handle.n,.resize-handle.s{position:absolute; left:50%; width:36px; height:8px; border-radius:3px; transform:translateX(-50%); cursor:ns-resize}.resize-handle.w,.resize-handle.e{position:absolute; top:50%; width:8px; height:36px; border-radius:3px; transform:translateY(-50%); cursor:ew-resize}.resize-handle.n{top:-5px}.resize-handle.s{bottom:-5px}.resize-handle.w{left:-5px}.resize-handle.e{right:-5px}.settings-panel{background:white; border-radius:12px; padding:1.5rem; box-shadow:0 2px 10px rgba(0,0,0,0.1); margin-bottom:2rem}.settings-row{display:flex; gap:2rem; align-items:end; flex-wrap:wrap}.setting-group{margin-bottom:1rem; min-width:150px}.setting-group label{display:block; margin-bottom:0.5rem; font-weight:500; color:#333}.setting-group select,.setting-group input[type="color"]{width:100%; padding:0.5rem; border:1px solid #ddd; border-radius:4px; font-size:1rem}.setting-group input[type="range"]{width:100%; margin-right:1rem}.templates-section{padding:4rem 0; background:white}.templates-section h2{text-align:center; margin-bottom:0.5rem}.templates-section > .container > p{text-align:center; margin-bottom:3rem}.templates-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem}.template-card{text-align:center; padding:2rem; border:1px solid #eee; border-radius:12px; transition:all 0.3s ease; background:white}.template-card:hover{transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,0.1)}.template-preview-large{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:1rem; height:120px}.template-preview-large.vertical{grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr}.how-to-section{padding:4rem 0; background:#f8f9fa}.how-to-section h2{text-align:center; margin-bottom:3rem}.steps-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem}.step{text-align:center; padding:2rem; background:white; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.1)}.step-number{width:60px; height:60px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:bold; margin:0 auto 1rem}.footer{background:#2c3e50; color:white; padding:3rem 0 1rem}.footer-content{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-bottom:2rem}.footer-section h4{margin-bottom:1rem; color:white}.footer-section ul{list-style:none}.footer-section ul li{margin-bottom:0.5rem}.footer-section a{color:#bdc3c7; text-decoration:none; transition:color 0.3s ease}.footer-section a:hover{color:white}.footer-bottom{text-align:center; padding-top:2rem; border-top:1px solid #34495e; color:#bdc3c7}@media (max-width:768px){.container{padding:0 15px}.header .container{flex-direction:column; gap:1rem}.nav{gap:1rem}.hero .container{grid-template-columns:1fr; text-align:center}.hero-content h2{font-size:2rem}.hero-buttons{gap:0.5rem}.settings-row{flex-direction:column; gap:1rem}.setting-group{min-width:auto; width:100%}.template-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.templates-grid{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr}.footer-content{grid-template-columns:1fr; text-align:center}}@media (max-width:480px){.hero{padding:2rem 0}.hero-content h2{font-size:1.5rem}.upload-area{padding:2rem 1rem}.template-grid{grid-template-columns:repeat(2,1fr)}.editor-header{flex-direction:column; align-items:stretch}.editor-controls{justify-content:center}.quick-template-grid{justify-content:center}.quick-template-item{min-width:70px}}.text-center{text-align:center}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.loading{display:inline-block; width:20px; height:20px; border:3px solid rgba(255,255,255,0.3); border-radius:50%; border-top-color:#fff; animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.dragging{opacity:0.5; transform:rotate(5deg)}.drop-zone{border:2px dashed #667eea; background:#f0f4ff}.toast{position:fixed; top:20px; right:20px; background:#333; color:white; padding:1rem 1.5rem; border-radius:8px; box-shadow:0 5px 15px rgba(0,0,0,0.3); z-index:10000; transform:translateX(100%); transition:transform 0.3s ease}.toast.show{transform:translateX(0)}.toast.success{background:#28a745}.toast.error{background:#dc3545}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1; border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.canvas-container::-webkit-scrollbar{width:14px; height:8px}.canvas-container::-webkit-scrollbar:horizontal{height:8px}.canvas-container::-webkit-scrollbar:vertical{width:14px}.canvas-container::-webkit-scrollbar-track{background:#e8e9ef; border-radius:4px}.canvas-container::-webkit-scrollbar-thumb{background:#4a5568; border-radius:4px; border:1px solid #e8e9ef}.canvas-container::-webkit-scrollbar-thumb:hover{background:#2d3748}.canvas-container::-webkit-scrollbar-corner{background:#e8e9ef}.workspace-editor{position:fixed; top:0; left:0; width:100vw; height:100vh; background:#f5f6fa; z-index:2000; display:flex; flex-direction:column}.workspace-header{position:fixed; top:0; left:0; right:0; height:60px; background:white; border-bottom:1px solid #e1e8ed; display:flex; align-items:center; justify-content:space-between; padding:0 20px; z-index:2001; box-shadow:0 2px 8px rgba(0,0,0,0.1)}.workspace-logo{display:flex; align-items:center; gap:8px; font-weight:600; color:#667eea; font-size:18px}.workspace-logo i{font-size:24px}.workspace-actions{display:flex; align-items:center; gap:12px}.workspace-btn{display:flex; align-items:center; gap:6px; padding:8px 16px; border:none; border-radius:6px; background:#f8f9fa; color:#495057; font-size:14px; cursor:pointer; transition:all 0.2s ease}.workspace-btn:hover{background:#e9ecef; transform:translateY(-1px)}.workspace-btn.workspace-btn-primary:hover{background:linear-gradient(135deg,#6f87f0 0%,#7b56b0 100%); color:#fff}.workspace-btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; border:2px solid transparent}.workspace-btn-primary:hover{background:linear-gradient(135deg,#6f87f0 0%,#7b56b0 100%); color:#fff; box-shadow:0 8px 20px rgba(102,126,234,0.35); transform:translateY(-1px)}.workspace-btn-large{padding:10px 20px; font-size:15px; height:40px; line-height:20px}.workspace-btn-outline{background:transparent; color:#667eea; border:2px solid #667eea}.workspace-btn-outline:hover{background:rgba(102,126,234,0.08); color:#5a6fd8; border-color:#5a6fd8}.workspace-btn-close{background:transparent; color:#dc3545; border:2px solid #dc3545; border-radius:6px; width:auto; height:36px; padding:8px 14px; justify-content:center}.workspace-btn-close:hover{background:rgba(220,53,69,0.08)}.workspace-layout{display:flex; height:100vh; padding-top:60px; overflow:visible}.workspace-sidebar{width:320px; background:white; border-right:1px solid #e1e8ed; overflow-y:hidden; flex-shrink:0; display:flex; flex-direction:column}.sidebar-section{border-bottom:1px solid #f1f3f4}.sidebar-section:first-child{flex-shrink:0}.sidebar-section:last-child{flex:1; display:flex; flex-direction:column; min-height:0}.sidebar-section:last-child .sidebar-content{flex:1; display:flex; flex-direction:column; min-height:0; padding:20px 20px 0 20px}.sidebar-title{display:flex; align-items:center; gap:8px; padding:16px 20px; margin:0; font-size:16px; font-weight:600; color:#333; background:#f8f9fa; border-bottom:1px solid #e1e8ed}.sidebar-title i{color:#667eea}.sidebar-content{padding:20px}.control-group{margin-bottom:20px}.control-group:last-child,.control-group:last-of-type{margin-bottom:0}.control-label{display:block; font-size:14px; font-weight:500; color:#333; margin-bottom:8px}.control-label .control-hint{font-size:12px; font-weight:400; color:#888; margin-left:6px}.control-wrapper{display:flex; align-items:center; gap:12px}.shadow-row{display:grid; grid-template-columns:1fr 1fr 35px; align-items:start; column-gap:24px}.shadow-control-item{display:flex; flex-direction:column}.shadow-item-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:15px}.shadow-sub-label{font-size:14px; color:#666}.shadow-control-wrapper{display:flex; align-items:center; gap:8px}.shadow-slider{width:100%; height:4px; border-radius:2px; background:#e1e8ed; outline:none; -webkit-appearance:none; appearance:none}.shadow-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:#667eea; cursor:pointer}.shadow-slider::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:#667eea; cursor:pointer; border:none}.shadow-value{font-size:12px; color:#666; min-width:20px; text-align:right}.shadow-color-item{display:flex; flex-direction:column}.shadow-color-picker{width:44px; height:28px; border-radius:6px; border:2px solid #e3e9ef; cursor:pointer; margin-top:-12px}.control-slider{flex:1; height:4px; background:#e1e8ed; border-radius:2px; outline:none; -webkit-appearance:none; appearance:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; background:#667eea; border-radius:50%; cursor:pointer}.control-slider::-moz-range-thumb{width:16px; height:16px; background:#667eea; border-radius:50%; cursor:pointer; border:none}.control-value{font-size:12px; font-weight:500; color:#666; min-width:20px; text-align:right}.color-picker{width:100%; height:40px; border:1px solid #e1e8ed; border-radius:6px; cursor:pointer}.color-picker-small{width:32px; height:24px; border:1px solid #e1e8ed; border-radius:4px; cursor:pointer; outline:none; transition:border-color 0.2s ease; margin-left:8px}.color-picker-small:hover{border-color:#667eea}.layouts-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}.layout-item{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; border:2px solid #e1e8ed; border-radius:8px; background:white; cursor:pointer; transition:all 0.2s ease}.layout-item:hover{border-color:#667eea; box-shadow:0 2px 8px rgba(102,126,234,0.1)}.layout-item.active{border-color:#667eea; background:#f8f9ff}.layout-preview{display:flex; gap:2px; flex-wrap:wrap; width:40px; height:30px}.layout-preview.layout-grid{display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:2px}.layout-cell{background:#d1d9e6; border-radius:2px; flex:1}.layout-preview .layout-cell:first-child{background:#667eea}.layout-item span{font-size:12px; color:#666; font-weight:500}.photo-count-selector{margin-bottom:16px}.count-tabs{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px}.count-tab{padding:6px 12px; border:1px solid #e1e8ed; border-radius:6px; background:white; color:#666; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; gap:4px}.count-tab:hover{border-color:#667eea; color:#667eea}.count-tab.active{background:#667eea; border-color:#667eea; color:white}.count-dropdown{position:relative}.dropdown-trigger{position:relative}.dropdown-trigger i{font-size:10px; margin-left:4px; transition:transform 0.2s ease}.dropdown-trigger.open i{transform:rotate(180deg)}.dropdown-menu{position:fixed; background:white; border:1px solid #e1e8ed; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:9999; display:none; flex-direction:column; gap:2px; padding:4px; max-height:200px; overflow-y:auto; visibility:visible; opacity:1}.dropdown-menu.show{display:flex !important; visibility:visible !important; opacity:1 !important}.dropdown-menu .count-tab{border:none; border-radius:4px; padding:6px 8px; font-size:13px}.dropdown-menu .count-tab:hover{background:#f8f9ff}.template-lists{max-height:400px; overflow-y:auto}.template-list{display:none}.template-list.active{display:block}.template-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:300px; overflow-y:auto}@media (max-width:768px){.template-grid{grid-template-columns:repeat(3,1fr); gap:6px}}@media (max-width:480px){.template-grid{grid-template-columns:repeat(3,1fr); gap:6px}}.template-grid::-webkit-scrollbar{width:4px}.template-grid::-webkit-scrollbar-track{background:#f1f1f1; border-radius:2px}.template-grid::-webkit-scrollbar-thumb{background:#c1c1c1; border-radius:2px}.template-grid::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.template-item{display:flex; align-items:center; justify-content:center; padding:4px; border:2px solid #e1e8ed; border-radius:8px; background:white; cursor:pointer; transition:all 0.2s ease; aspect-ratio:1; box-shadow:0 1px 3px rgba(0,0,0,0.05); width:100%; min-width:0}.template-item:hover{border-color:#667eea; box-shadow:0 4px 16px rgba(102,126,234,0.15); transform:translateY(-1px)}.template-item.active{border-color:#667eea; background:#f8f9ff; box-shadow:0 4px 16px rgba(102,126,234,0.2); transform:translateY(-1px)}.template-preview{width:64px; height:52px; display:flex; gap:2px; align-items:stretch}.template-preview svg{width:100%; height:100%}@media (max-width:768px){.template-preview{width:56px; height:46px}}@media (max-width:480px){.template-preview{width:48px; height:40px; gap:1px}.template-item{padding:3px}}.template-preview.vertical{flex-direction:column}.template-name{display:none}.template-preview.grid{display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:2px}.template-preview.grid-3x3{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:1px}.template-preview.grid-4x4{display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:1px}.template-preview.mixed{display:flex; gap:2px}.template-preview.grid-multi{display:flex; align-items:center; justify-content:center; background:#f8f9ff; border:1px solid #e1e8ed; border-radius:4px}.preview-cell{background:#d1d9e6; border-radius:2px; flex:1; min-height:8px}.preview-cell.large{flex:2}.preview-cell.small{background:#b8c5d6; min-height:6px}.preview-cell.tiny{background:#a8b5c6; min-height:3px}.template-preview .preview-cell:first-child{background:#667eea}.template-preview .preview-cell.small:first-child{background:#5a6fd8}.template-preview .preview-cell.tiny:first-child{background:#4e62d2}.preview-column{display:flex; flex-direction:column; gap:2px; flex:1}.photo-count{font-size:10px; font-weight:600; color:#667eea}.template-lists::-webkit-scrollbar{width:4px}.template-lists::-webkit-scrollbar-track{background:#f1f3f4; border-radius:2px}.template-lists::-webkit-scrollbar-thumb{background:#d1d9e6; border-radius:2px}.template-lists::-webkit-scrollbar-thumb:hover{background:#b8c5d6}.export-options{display:flex; flex-direction:column; gap:8px}.export-btn{display:flex; align-items:center; gap:8px; padding:12px 16px; border:none; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s ease; text-align:left}.export-btn.primary{background:#667eea; color:white}.export-btn.primary:hover{background:#5a6fd8; transform:translateY(-1px); box-shadow:0 4px 12px rgba(102,126,234,0.3)}.export-btn.secondary{background:#f8f9fa; color:#495057; border:1px solid #e1e8ed}.export-btn.secondary:hover{background:#e9ecef; border-color:#667eea; color:#667eea}.export-btn i{font-size:16px}.export-progress{margin-top:12px; padding:8px 0}.progress-bar{width:100%; height:6px; background:#e9ecef; border-radius:3px; overflow:hidden; margin-bottom:8px}.progress-fill{height:100%; background:linear-gradient(90deg,#667eea,#764ba2); border-radius:3px; width:0%; transition:width 0.3s ease}.progress-text{font-size:12px; color:#666; display:block}.workspace-canvas{flex:1; display:flex; flex-direction:column; padding:0; background:#f5f6fa; overflow:hidden; max-height:calc(100vh - 60px)}.canvas-toolbar{display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:white; border-bottom:1px solid #e1e8ed; box-shadow:0 2px 4px rgba(0,0,0,0.05); flex-shrink:0; position:relative; z-index:10; min-width:0}.canvas-toolbar-left,.canvas-toolbar-right{display:flex; align-items:center; gap:20px; min-width:0; flex-shrink:1}.toolbar-group{display:flex; align-items:center; gap:8px; font-size:14px}.toolbar-group label{font-weight:500; color:#333; white-space:nowrap; min-width:45px}.size-input{width:80px; padding:6px 8px; border:1px solid #e1e8ed; border-radius:4px; font-size:14px; text-align:center; cursor:text; transition:all 0.2s ease}.size-input:focus{outline:none; border-color:#667eea; box-shadow:0 0 0 2px rgba(102,126,234,0.1); background:#f8f9ff}.size-input:hover{border-color:#aab4d4}.width-slider,.height-slider{width:100px; height:4px; background:#e1e8ed; border-radius:2px; outline:none; -webkit-appearance:none; appearance:none; margin:0 4px}.width-slider::-webkit-slider-thumb,.height-slider::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; background:#667eea; border-radius:50%; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,0.2)}.width-slider::-moz-range-thumb,.height-slider::-moz-range-thumb{width:16px; height:16px; background:#667eea; border-radius:50%; cursor:pointer; border:none; box-shadow:0 2px 4px rgba(0,0,0,0.2)}.zoom-slider{width:120px; height:4px; background:#e1e8ed; border-radius:2px; outline:none; -webkit-appearance:none; appearance:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; background:#667eea; border-radius:50%; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,0.2)}.zoom-slider::-moz-range-thumb{width:16px; height:16px; background:#667eea; border-radius:50%; cursor:pointer; border:none; box-shadow:0 2px 4px rgba(0,0,0,0.2)}.zoom-value{font-weight:600; color:#667eea; min-width:40px; text-align:center}.toolbar-btn{width:32px; height:32px; border:1px solid #e1e8ed; border-radius:4px; background:white; color:#666; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease}.toolbar-btn:hover{border-color:#667eea; color:#667eea; background:#f8f9ff}.canvas-container{flex:1; display:block; padding:0; overflow:auto; position:relative; min-height:0; max-height:calc(100vh - 120px); text-align:center; transition:cursor 0.1s ease; min-width:0}.canvas-container.canvas-panning-mode{cursor:grab !important}.canvas-container.canvas-panning-mode *{cursor:grab !important}.canvas-container.canvas-panning-active{cursor:grabbing !important; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}.canvas-container.canvas-panning-active *{cursor:grabbing !important}.canvas-container.canvas-panning-mode .workspace-photo:hover,.canvas-container.canvas-panning-mode .collage-item:hover,.canvas-container.canvas-panning-mode .resize-handle:hover,.canvas-container.canvas-panning-mode .rotate-handle:hover,.canvas-container.canvas-panning-mode .move-handle:hover,.canvas-container.canvas-panning-mode .delete-button:hover{cursor:grab !important}.canvas-container.canvas-panning-active .workspace-photo:hover,.canvas-container.canvas-panning-active .collage-item:hover,.canvas-container.canvas-panning-active .resize-handle:hover,.canvas-container.canvas-panning-active .rotate-handle:hover,.canvas-container.canvas-panning-active .move-handle:hover,.canvas-container.canvas-panning-active .delete-button:hover{cursor:grabbing !important}.canvas-container.workspace-dragging .workspace-photo:hover{box-shadow:none !important; border-color:transparent !important; z-index:auto !important}.canvas-container.workspace-dragging .workspace-photo:not(.dragging){z-index:0 !important}.canvas-container.workspace-dragging .workspace-photo:hover .resize-handle,.canvas-container.workspace-dragging .workspace-photo:hover .rotate-handle,.canvas-container.workspace-dragging .workspace-photo:hover .move-handle,.canvas-container.workspace-dragging .workspace-photo:hover .delete-button{opacity:0 !important; pointer-events:none !important}.canvas-container.workspace-dragging .workspace-photo:not(.dragging){pointer-events:none !important; transition:none !important}.canvas-container.workspace-dragging .workspace-photo:not(.dragging) .resize-handle,.canvas-container.workspace-dragging .workspace-photo:not(.dragging) .rotate-handle,.canvas-container.workspace-dragging .workspace-photo:not(.dragging) .move-handle,.canvas-container.workspace-dragging .workspace-photo:not(.dragging) .delete-button{opacity:0 !important; pointer-events:none !important; transform:none !important; visibility:hidden !important}.canvas-container.dragover{background:rgba(102,126,234,0.1); border:2px dashed #667eea; border-radius:8px}.canvas-container.dragover::before{content:'Drop images here to add them to canvas'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(102,126,234,0.9); color:white; padding:12px 24px; border-radius:6px; font-size:14px; font-weight:500; z-index:999999; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,0.2)}.canvas-content{position:relative; background:white; border-radius:0; width:600px; height:600px; border:2px solid #e1e8ed; box-shadow:0 4px 20px rgba(0,0,0,0.1); overflow:visible; transform-origin:center center; transition:transform 0.2s ease,border-color 0.2s ease; contain:none; z-index:1; display:inline-block; text-align:left; vertical-align:top}.canvas-content{transition:border-color 0.2s ease}.canvas-content.resizing{border-color:#5a6fd8 !important}.canvas-resize-controls{position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; opacity:0; transition:opacity 0.2s ease; z-index:10000}.canvas-content.border-hover{border-color:#667eea !important; z-index:9999}.canvas-content.border-hover .canvas-resize-controls,.canvas-content.resizing .canvas-resize-controls{opacity:1; pointer-events:auto}.canvas-corner-handle{position:absolute; width:20px; height:20px; background:#667eea; border:2px solid white; border-radius:50%; cursor:pointer; z-index:10001; transition:all 0.2s ease; transform:translate(-50%,-50%)}.canvas-corner-handle:hover{background:#5a6fd8; transform:translate(-50%,-50%) scale(1.2)}.canvas-corner-handle.nw{top:0; left:0; cursor:nw-resize; transform:translate(-50%,-50%)}.canvas-corner-handle.ne{top:0; right:0; cursor:ne-resize; transform:translate(50%,-50%)}.canvas-corner-handle.sw{bottom:0; left:0; cursor:sw-resize; transform:translate(-50%,50%)}.canvas-corner-handle.se{bottom:0; right:0; cursor:se-resize; transform:translate(50%,50%)}.canvas-corner-handle.nw:hover{transform:translate(-50%,-50%) scale(1.2)}.canvas-corner-handle.ne:hover{transform:translate(50%,-50%) scale(1.2)}.canvas-corner-handle.sw:hover{transform:translate(-50%,50%) scale(1.2)}.canvas-corner-handle.se:hover{transform:translate(50%,50%) scale(1.2)}.canvas-edge-handle{position:absolute; background:#667eea; border:1px solid white; border-radius:2px; z-index:10001; transition:all 0.2s ease}.canvas-edge-handle:hover{background:#5a6fd8}.canvas-edge-handle.top,.canvas-edge-handle.bottom{left:50%; width:50px; height:10px; cursor:ns-resize; transform:translateX(-50%)}.canvas-edge-handle.left,.canvas-edge-handle.right{top:50%; width:10px; height:50px; cursor:ew-resize; transform:translateY(-50%)}.canvas-edge-handle.top{top:-5px}.canvas-edge-handle.bottom{bottom:-5px}.canvas-edge-handle.left{left:-5px}.canvas-edge-handle.right{right:-5px}.canvas-resize-handle{position:absolute; bottom:-8px; right:-8px; width:16px; height:16px; background:#667eea; border:2px solid white; border-radius:4px; cursor:se-resize; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s ease; z-index:1000}.canvas-resize-handle i{font-size:8px; color:white}.canvas-content:hover .canvas-resize-handle{opacity:1}.canvas-resize-handle:hover{background:#5a6fd8; transform:scale(1.2)}.workspace-photo{border:none !important; transition:box-shadow 0.2s ease,z-index 0.1s ease; pointer-events:auto; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; will-change:transform; transform-origin:center center; cursor:move}.workspace-photo:hover{box-shadow:0 4px 16px rgba(102,126,234,0.3) !important}.workspace-photo.selected{box-shadow:0 4px 16px rgba(102,126,234,0.5) !important; z-index:999997 !important}.workspace-photo.dragging{z-index:2147483647 !important; border-color:#667eea !important; box-shadow:0 8px 32px rgba(0,0,0,0.3) !important; transition:none !important; pointer-events:none}.workspace-photo.resizing{z-index:999999 !important; border-color:#667eea !important; box-shadow:0 4px 16px rgba(102,126,234,0.3) !important; transition:none !important}.workspace-photo.rotating{z-index:999999 !important; border-color:#667eea !important; box-shadow:0 4px 16px rgba(102,126,234,0.3) !important; transition:none !important}.workspace-photo .resize-handle{position:absolute; width:14px; height:14px; background:#667eea; border:3px solid white; border-radius:50%; opacity:0; transition:opacity 0.2s ease; z-index:999999; box-shadow:0 4px 12px rgba(0,0,0,0.4); pointer-events:auto}.workspace-photo .resize-handle.n,.workspace-photo .resize-handle.s{left:50%; width:40px; height:10px; border-radius:3px; transform:translateX(-50%); cursor:ns-resize}.workspace-photo .resize-handle.w,.workspace-photo .resize-handle.e{top:50%; width:10px; height:40px; border-radius:3px; transform:translateY(-50%); cursor:ew-resize}.workspace-photo .resize-handle.n{top:-6px}.workspace-photo .resize-handle.s{bottom:-6px}.workspace-photo .resize-handle.w{left:-6px}.workspace-photo .resize-handle.e{right:-6px}.workspace-photo .resize-handle.n{z-index:1000002}.workspace-photo:hover .resize-handle,.workspace-photo.selected .resize-handle{opacity:1}.workspace-photo.dragging .resize-handle,.workspace-photo.resizing .resize-handle{opacity:1}.workspace-photo .resize-handle:hover{background:#5a6fd8; box-shadow:0 4px 12px rgba(0,0,0,0.4)}.workspace-photo .resize-handle.nw:hover,.workspace-photo .resize-handle.ne:hover,.workspace-photo .resize-handle.sw:hover,.workspace-photo .resize-handle.se:hover{transform:scale(1.3)}.workspace-photo .resize-handle.n:hover,.workspace-photo .resize-handle.s:hover{transform:translateX(-50%) scale(1.1)}.workspace-photo .resize-handle.w:hover,.workspace-photo .resize-handle.e:hover{transform:translateY(-50%) scale(1.1)}.workspace-photo .resize-handle.ne::before{content:''; position:absolute; width:18px; height:18px; left:-13px; top:-11px; background:transparent; pointer-events:auto; z-index:999999}.workspace-photo .rotate-handle{position:absolute; width:26px; height:26px; background:#667eea; border:3px solid white; border-radius:50%; opacity:0; transition:opacity 0.2s ease,transform 0.2s ease; z-index:999999; cursor:pointer; display:flex; align-items:center; justify-content:center; top:-38px; left:50%; transform:translateX(-50%); box-shadow:0 6px 16px rgba(0,0,0,0.4); pointer-events:auto}.workspace-photo .move-handle{position:absolute; width:26px; height:26px; background:#28a745; border:3px solid white; border-radius:50%; opacity:0; transition:opacity 0.2s ease,transform 0.2s ease; z-index:999999; cursor:move; display:flex; align-items:center; justify-content:center; top:-38px; left:-14px; box-shadow:0 6px 16px rgba(0,0,0,0.4); pointer-events:auto}.workspace-photo .rotate-handle::before{content:''; position:absolute; width:40px; height:35px; left:50%; top:100%; transform:translateX(-50%); background:transparent; pointer-events:auto; z-index:999999}.workspace-photo .move-handle::before{content:''; position:absolute; width:35px; height:40px; right:100%; top:50%; transform:translateY(-50%); background:transparent; pointer-events:auto; z-index:999999}.workspace-photo:hover .rotate-handle,.workspace-photo.selected .rotate-handle,.workspace-photo:hover .move-handle,.workspace-photo.selected .move-handle{opacity:1}.workspace-photo.dragging .rotate-handle,.workspace-photo.resizing .rotate-handle,.workspace-photo.rotating .rotate-handle,.workspace-photo.dragging .move-handle,.workspace-photo.resizing .move-handle,.workspace-photo.moving .move-handle{opacity:1}.workspace-photo .rotate-handle:hover{background:#5a6fd8; transform:translateX(-50%) scale(1.2); box-shadow:0 6px 16px rgba(0,0,0,0.4)}.workspace-photo .move-handle:hover{background:#218838; transform:scale(1.2); box-shadow:0 6px 16px rgba(0,0,0,0.4)}.workspace-photo .rotate-handle i{font-size:12px; color:white; pointer-events:none}.workspace-photo .move-handle i{font-size:12px; color:white; pointer-events:none}.workspace-photo .rotate-handle:hover i{animation:rotateIcon 1s linear infinite}@keyframes rotateIcon{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.workspace-photo .delete-button{position:absolute; width:20px; height:20px; background:#999999; border:2px solid white; border-radius:50%; opacity:0; transition:opacity 0.2s ease,transform 0.2s ease; z-index:999999; cursor:pointer; display:flex; align-items:center; justify-content:center; top:-35px; right:-10px; box-shadow:0 4px 12px rgba(0,0,0,0.3); pointer-events:auto}.workspace-photo:hover .delete-button,.workspace-photo.selected .delete-button{opacity:1}.workspace-photo.dragging .delete-button,.workspace-photo.resizing .delete-button,.workspace-photo.rotating .delete-button{opacity:1}.workspace-photo .delete-button:hover{background:#777777; transform:scale(1.2); box-shadow:0 4px 12px rgba(0,0,0,0.4)}.workspace-photo .delete-button i{font-size:10px; color:white; pointer-events:none}.workspace-photo .delete-button::before{content:''; position:absolute; width:25px; height:15px; left:-25px; top:0; background:transparent; pointer-events:auto; z-index:999998}.unified-template-selector{display:flex; flex-direction:column; height:100%}.photo-count-tabs{display:flex; align-items:center; margin-bottom:12px; gap:7px; flex-wrap:nowrap; overflow-x:auto}.count-tab{min-width:32px; height:32px; padding:6px 10px; border:1px solid #e1e8ed; border-radius:16px; background:white; color:#666; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; flex-shrink:0; white-space:nowrap}.count-tab:hover{border-color:#667eea; color:#667eea; background:#f8f9ff}.count-tab.active{background:#667eea; color:white; border-color:#667eea}.count-dropdown{position:relative}.dropdown-menu .count-tab:hover{background:#f8f9ff}.unified-template-list{flex:1; overflow-y:auto; padding:0 4px 20px 4px; min-height:0}.unified-template-list::-webkit-scrollbar{width:4px}.unified-template-list::-webkit-scrollbar-track{background:#f1f1f1; border-radius:2px}.unified-template-list::-webkit-scrollbar-thumb{background:#c1c1c1; border-radius:2px}.unified-template-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.template-section{margin-bottom:16px}.template-section-title{font-size:14px; font-weight:600; color:#333; margin-bottom:8px; padding:8px 12px; background:#f8f9fa; border-radius:6px; border-left:3px solid #667eea}.template-section-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:8px}.unified-template-item{display:flex; align-items:center; justify-content:center; padding:4px; border:2px solid #e1e8ed; border-radius:8px; background:white; cursor:pointer; transition:all 0.2s ease; aspect-ratio:1; box-shadow:0 1px 3px rgba(0,0,0,0.05); width:100%; min-width:0}.unified-template-item:hover{border-color:#667eea; box-shadow:0 4px 16px rgba(102,126,234,0.15); transform:translateY(-1px)}.unified-template-item.active{border-color:#667eea; background:#f8f9ff; box-shadow:0 4px 16px rgba(102,126,234,0.2); transform:translateY(-1px)}.unified-template-item .template-preview{width:64px; height:52px; display:flex; gap:2px; align-items:stretch}.unified-template-item .template-preview svg{width:100%; height:100%}@media (max-width:768px){.photo-count-tabs{gap:6px}.count-tab{min-width:36px; height:28px; font-size:12px; padding:4px 8px}.template-section-grid{grid-template-columns:repeat(3,1fr); gap:6px}.unified-template-item .template-preview{width:56px; height:46px}}@media (max-width:480px){.template-section-grid{grid-template-columns:repeat(3,1fr); gap:6px}.unified-template-item{padding:3px}.unified-template-item .template-preview{width:48px; height:40px; gap:1px}}@media (max-width:768px){.workspace-layout{flex-direction:column}.workspace-sidebar{width:100%; height:250px; border-right:none; border-bottom:1px solid #e1e8ed; overflow-x:auto; overflow-y:visible; display:flex; flex-direction:row; padding-bottom:0}.sidebar-section{min-width:280px; border-right:1px solid #f1f3f4; border-bottom:none; flex-shrink:0; height:100%; display:flex; flex-direction:column}.sidebar-section:last-child{border-right:none}.sidebar-title{font-size:14px; padding:12px 16px}.sidebar-content{padding:16px}.control-group{margin-bottom:16px}.layouts-grid{grid-template-columns:repeat(3,1fr); gap:8px}.layout-item{padding:8px; gap:6px}.layout-preview{width:32px; height:24px}.canvas-container{padding:0; overflow:auto; max-height:calc(100vh - 180px)}.canvas-content{max-width:400px}.workspace-canvas{max-height:calc(100vh - 300px)}.canvas-toolbar{flex-direction:column; gap:12px; padding:12px 16px}.canvas-toolbar-left,.canvas-toolbar-right{flex-direction:column; gap:12px; width:100%}.toolbar-group{justify-content:space-between; width:100%}.zoom-slider{width:100px}.canvas-container{padding:16px}.workspace-header{height:50px; padding:0 16px}.workspace-layout{padding-top:50px; overflow:visible}.workspace-logo{font-size:16px}.workspace-logo i{font-size:20px}.workspace-btn span{display:none}.workspace-btn{padding:8px; width:36px; height:36px; justify-content:center}}@media (max-width:480px){.workspace-sidebar{height:200px}.sidebar-section{min-width:250px}.sidebar-content{padding:12px}.layouts-grid{grid-template-columns:repeat(3,1fr); gap:6px}.layout-item{padding:6px; gap:4px}.layout-item span{font-size:10px}.canvas-container{padding:0; overflow:auto; max-height:calc(100vh - 160px)}.canvas-content{max-width:300px}.workspace-canvas{max-height:calc(100vh - 250px)}.canvas-toolbar{padding:8px 12px; gap:8px}.canvas-toolbar-left,.canvas-toolbar-right{gap:8px}.toolbar-group{font-size:12px}.size-input{width:60px; font-size:12px; padding:4px 6px}.zoom-slider{width:80px}.toolbar-btn{width:28px; height:28px}.canvas-container{padding:12px}.workspace-actions{gap:8px}}