.template-grid{display:flex;gap:8px;flex-wrap:wrap}.template-btn{flex:1;min-width:60px;padding:10px 6px;background:#fff;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all 0.2s ease;display:flex;flex-direction:column;align-items:center;gap:6px}.template-btn:hover{border-color:#a5b4fc;background:#f5f3ff}.template-btn.active{border-color:#6366f1;background:#eef2ff}.template-btn span{font-size:11px;font-weight:600;color:#6b7280}.template-btn.active span{color:#4f46e5}.template-preview{width:40px;height:40px;display:grid;gap:2px}.template-preview::before,.template-preview::after,.template-preview>*{background:#d1d5db;border-radius:2px}.grid-2x2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.grid-2x2::before{content:''}.grid-2x2::after{content:'';grid-column:2;grid-row:1}.grid-3x3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.grid-2x3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.grid-1x3{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.grid-3x1{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.grid-3x3::before,.grid-3x3::after,.grid-2x3::before,.grid-2x3::after,.grid-1x3::before,.grid-1x3::after,.grid-3x1::before,.grid-3x1::after,.grid-2x2::before,.grid-2x2::after{content:'';background:#d1d5db;border-radius:2px}.image-list{display:flex;gap:8px;flex-wrap:wrap;padding:12px;background:#f9fafb;border-radius:10px;min-height:80px}.image-item{position:relative;width:60px;height:60px;border-radius:8px;overflow:hidden;cursor:grab;box-shadow:0 2px 4px rgb(0 0 0 / .1);transition:transform 0.2s ease}.image-item:hover{transform:scale(1.05)}.image-item.dragging{opacity:.5;cursor:grabbing}.image-item img{width:100%;height:100%;object-fit:cover}.image-item .remove-btn{position:absolute;top:2px;right:2px;width:18px;height:18px;background:rgb(239 68 68 / .9);color:#fff;border:none;border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s ease}.image-item:hover .remove-btn{opacity:1}.image-item .index{position:absolute;bottom:2px;left:2px;width:16px;height:16px;background:rgb(0 0 0 / .6);color:#fff;border-radius:4px;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}.color-picker-wrapper{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:2px solid #e5e7eb;border-radius:8px}.color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:2px solid #d1d5db;border-radius:6px}#spacing-slider,#radius-slider{-webkit-appearance:none;appearance:none;height:8px;background:#e5e7eb;border-radius:4px;outline:none}#spacing-slider::-webkit-slider-thumb,#radius-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#6366f1;border-radius:50%;cursor:pointer}.collage-preview{background:#fff;border:2px dashed #d1d5db;border-radius:12px;padding:16px;min-height:200px;display:flex;align-items:center;justify-content:center}.collage-preview canvas{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 4px 12px rgb(0 0 0 / .1)}.collage-preview .placeholder{color:#9ca3af;text-align:center}@media (max-width:640px){.template-btn{min-width:50px;padding:8px 4px}.template-preview{width:32px;height:32px}.image-item{width:50px;height:50px}}#download-btn.generating{pointer-events:none;opacity:.7}#download-btn.generating::after{content:'';display:inline-block;width:16px;height:16px;margin-left:8px;border:2px solid rgb(255 255 255 / .3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}