body { background-color: #f0f2f5; margin: 0; font-family: 'Segoe UI', sans-serif; overflow: hidden; }
.back-btn { position: fixed; top: 20px; right: 20px; z-index: 100; text-decoration: none; color: #003366; font-weight: bold; background: #fff; padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; gap: 10px; }
.lab-layout { display: flex; height: 100vh; flex-direction: row; }
.controls-panel { width: 350px; background: #fff; padding: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 10; overflow-y: auto; }
.preview-panel { flex-grow: 1; background: #e9ecef; display: flex; align-items: center; justify-content: center; }
.mockup-container { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1/1; box-shadow: 0 20px 50px rgba(0,0,0,0.2); border-radius: 20px; overflow: hidden; background: #fff; }
.product-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#logo-overlay { position: absolute; top: 50%; left: 50%; width: 30%; transform-origin: center center; cursor: grab; transform: translate(-50%, -50%) scale(1) rotate(0deg); mix-blend-mode: multiply; }
.control-group { background: #f8f9fa; padding: 15px; border-radius: 10px; border: 1px solid #eee; }
.btn { padding: 12px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; margin-top: 5px; }
.btn-primary { background: #0066cc; color: #fff; }
@media (max-width: 768px) { .lab-layout { flex-direction: column-reverse; height: auto; overflow-y: auto; } .controls-panel { width: 100%; height: auto; } body { overflow: auto; } }