*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f5f5;color:#1a1a1a;-webkit-font-smoothing:antialiased}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:baseline;gap:12px;padding:16px 24px;background:#fff;border-bottom:1px solid #e0e0e0}.app-header h1{font-size:1.25rem;font-weight:700}.header-subtitle{font-size:.875rem;color:#888}.app-layout{display:flex;flex:1;gap:0;overflow:hidden}.sidebar{width:280px;flex-shrink:0;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;padding:16px}.sidebar-right{border-right:none;border-left:1px solid #e0e0e0}.main-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px;overflow:auto}.toolbar{display:flex;gap:4px;padding:8px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:16px}.toolbar-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#555;font-size:.7rem;transition:all .15s}.toolbar-btn:hover{background:#f0f0f0;color:#1a1a1a}.toolbar-btn.active{background:#e8f0fe;color:#1a73e8}.toolbar-btn.remove-bg{color:#7c3aed}.toolbar-btn.remove-bg:hover{background:#f0e8ff;color:#7c3aed}.toolbar-btn.remove-bg:disabled{opacity:.6;cursor:wait}.toolbar-spinner{width:18px;height:18px;border-width:2px}.toolbar-btn.danger:hover{background:#fef2f2;color:#dc2626}.toolbar-btn:disabled{opacity:.3;cursor:not-allowed}.toolbar-divider{width:1px;background:#e0e0e0;margin:4px 8px}.toolbar-crop-mode{background:#2d2d2d;border-color:#444}.toolbar-crop-label{display:flex;align-items:center;padding:0 12px;font-size:.85rem;font-weight:600;color:#fff}.toolbar-btn.crop-apply{color:#22c55e}.toolbar-btn.crop-apply:hover{background:#22c55e26;color:#22c55e}.toolbar-btn.crop-cancel{color:#f87171}.toolbar-btn.crop-cancel:hover{background:#f8717126;color:#f87171}.toolbar-btn.crop-btn{color:#f59e0b}.toolbar-btn.crop-btn:hover{background:#fef3c7;color:#d97706}.side-toggle-btn:disabled{opacity:.4;cursor:not-allowed}.side-toggle{display:flex;justify-content:center;gap:0;margin-bottom:12px}.side-toggle-btn{padding:8px 24px;border:1px solid #d0d0d0;background:#fff;font-size:.875rem;font-weight:500;cursor:pointer;color:#555;transition:all .15s}.side-toggle-btn:first-child{border-radius:6px 0 0 6px}.side-toggle-btn:last-child{border-radius:0 6px 6px 0;border-left:none}.side-toggle-btn.active{background:#1a73e8;border-color:#1a73e8;color:#fff}.side-toggle-btn:not(.active):hover{background:#f0f0f0}.product-preview{position:relative;display:inline-block}.mockup-wrapper{position:relative;width:500px;height:600px;background:#f0f0f0;border-radius:8px;overflow:hidden}.mockup-colorizer{position:absolute;top:0;left:0;width:100%;height:100%;isolation:isolate;z-index:0}.shirt-color-fill{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mockup-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.design-canvas-wrap{width:500px;height:600px;position:relative}.dimension-readout{display:flex;align-items:center;gap:16px;padding:6px 12px;margin-top:8px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;font-size:.8rem;color:#555}.dimension-item{display:flex;align-items:center;gap:4px}.dimension-value{font-family:SF Mono,Fira Code,Consolas,monospace;font-weight:600;color:#333}.dimension-selection,.dimension-selection .dimension-value{color:#1a73e8}.panel{margin-bottom:20px}.panel h3{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-bottom:12px}.panel h4{font-size:.8rem;font-weight:600;color:#888;margin:12px 0 8px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid #d0d0d0;border-radius:6px;background:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s;width:100%}.btn:hover{background:#f5f5f5}.btn-primary{background:#1a73e8;color:#fff;border-color:#1a73e8}.btn-primary:hover{background:#1557b0}.btn-primary:disabled{background:#93b5e5;cursor:not-allowed}.btn-secondary{background:#fff;color:#1a73e8;border-color:#1a73e8}.btn-secondary:hover{background:#e8f0fe}.btn-download{background:#fff;color:#059669;border-color:#059669}.btn-download:hover{background:#ecfdf5}.btn-download:disabled{opacity:.6;cursor:wait}.btn-back{background:none;border:none;color:#1a73e8;cursor:pointer;padding:4px 0;font-size:.875rem;margin-bottom:12px}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.product-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .15s}.product-btn:hover{border-color:#1a73e8;background:#f8faff}.product-btn.selected{border-color:#1a73e8;background:#e8f0fe}.product-icon{font-size:1.5rem;line-height:1}.product-label{font-size:.75rem;font-weight:600;color:#444}.product-btn.selected .product-label{color:#1a73e8}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.color-swatch{width:48px;height:48px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.selected{box-shadow:0 0 0 3px #1a73e8!important;border-color:#1a73e8!important}.color-label{text-align:center;font-size:.8rem;color:#888;margin-top:8px}.text-controls{display:flex;flex-direction:column;gap:10px;margin-top:12px}.text-controls label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:#666}.text-controls select,.text-controls input[type=number],.text-controls input[type=color]{padding:6px 8px;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.text-controls input[type=color]{height:36px;padding:2px;cursor:pointer}.text-style-buttons,.text-align-buttons{display:flex;gap:4px}.style-btn{padding:6px 12px;border:1px solid #d0d0d0;border-radius:4px;background:#fff;cursor:pointer;font-size:.875rem;transition:all .15s}.style-btn:hover{background:#f0f0f0}.style-btn.active{background:#e8f0fe;border-color:#1a73e8;color:#1a73e8}.drop-zone{border:2px dashed #ccc;border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:all .15s;color:#888}.drop-zone:hover,.drop-zone.dragging{border-color:#1a73e8;background:#e8f0fe;color:#1a73e8}.drop-zone p{margin-top:8px;font-size:.875rem}.drop-zone small{font-size:.75rem;color:#aaa}.uploading{color:#1a73e8;font-weight:500}.upload-thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.upload-thumb-wrapper{display:flex;flex-direction:column;gap:4px}.upload-thumb{width:100%;aspect-ratio:1;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;cursor:pointer;background:#f9f9f9;padding:0}.upload-thumb:hover{border-color:#1a73e8}.upload-thumb img{width:100%;height:100%;object-fit:contain}.remove-bg-btn{display:flex;align-items:center;justify-content:center;gap:3px;padding:3px 0;border:1px solid #d0d0d0;border-radius:4px;background:#fff;cursor:pointer;font-size:.65rem;color:#666;transition:all .15s;white-space:nowrap}.remove-bg-btn:hover{background:#f0e8ff;border-color:#7c3aed;color:#7c3aed}.remove-bg-btn:disabled{opacity:.6;cursor:wait}.removing-bg-spinner{display:inline-block;width:12px;height:12px;border:2px solid #d0d0d0;border-top-color:#7c3aed;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.order-options{display:flex;flex-direction:column;gap:8px}.cart-form,.quote-form{display:flex;flex-direction:column;gap:10px}.cart-form label,.quote-form label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:#666}.cart-form select,.cart-form input,.quote-form select,.quote-form input,.quote-form textarea{padding:8px 10px;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;font-family:inherit}.quote-form textarea{resize:vertical}.order-summary{font-size:.85rem;color:#555;text-align:center;padding:8px;background:#f9f9f9;border-radius:4px}.success-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;text-align:center}.success-message p{color:#22c55e;font-weight:500}.error-text{color:#dc2626;font-size:.8rem;margin-top:4px}.download-form{display:flex;flex-direction:column;gap:10px}.download-heading{font-size:.875rem;font-weight:500;color:#444}.download-checkboxes{display:flex;flex-direction:column;gap:8px}.download-checkbox{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #d0d0d0;border-radius:6px;cursor:pointer;font-size:.875rem;transition:all .15s}.download-checkbox:hover{border-color:#059669;background:#ecfdf5}.download-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#059669;cursor:pointer}@media(max-width:1024px){.app-layout{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid #e0e0e0}.sidebar-right{border-left:none;border-top:1px solid #e0e0e0}.sidebar-left{display:flex;gap:16px;overflow-x:auto;padding:12px 16px}.sidebar-left .panel{min-width:200px;margin-bottom:0}}@media(max-width:600px){.mockup-wrapper,.design-canvas-wrap{width:100%;max-width:360px;height:auto;aspect-ratio:5/6}.toolbar{flex-wrap:wrap;justify-content:center}.color-grid{grid-template-columns:repeat(4,1fr)}.color-swatch{width:36px;height:36px}}