@media (max-width:768px){.main-content{flex-direction:column;overflow:visible;gap:0;margin:0;padding:0}.canvas-container{position:fixed;top:0;left:0;width:100vw;height:45vh!important;min-height:320px;padding-bottom:0;padding-top:0;justify-content:center;z-index:100;background-color:#f8f9fa;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;overflow:hidden}canvas{max-width:90%!important;max-height:90%!important;height:auto!important;width:auto!important;margin:0;display:block;object-fit:contain}.action-buttons{position:absolute;bottom:10px;left:10px;z-index:200;width:auto;background:0 0;box-shadow:none;padding:0;display:flex;justify-content:flex-start;align-items:flex-end}.save-design-btn{width:auto;min-width:0;font-size:14px;padding:12px 20px;border-radius:8px;white-space:nowrap;line-height:1.2;text-align:center;height:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;position:fixed;bottom:20px;right:20px;left:auto;margin:0}.zoom-slider-container{width:100%;background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:5px;margin:5px 0;max-width:200px}.pattern-slider-container,.slider-container{padding:5px;margin:5px 0;max-width:200px}.pattern-size-slider,.slider,.zoom-slider{height:4px}.pattern-size-slider::-webkit-slider-thumb,.slider::-webkit-slider-thumb,.zoom-slider::-webkit-slider-thumb{width:16px;height:16px}.pattern-size-slider::-moz-range-thumb,.slider::-moz-range-thumb,.zoom-slider::-moz-range-thumb{width:16px;height:16px}.slider-mark{font-size:12px}h1{text-align:center;margin-top:47vh;padding:0 15px;color:#2c3e50;font-size:1.5rem;line-height:1.3;white-space:normal;word-wrap:break-word;position:relative;z-index:90;background:#fff}.control-group{position:relative;padding:10px;margin-left:0;margin-right:0;background:#fff;z-index:90;width:100%;box-sizing:border-box;border-radius:0;box-shadow:none}.control-group:first-of-type{margin-top:0;margin-bottom:5px}.control-group:not(:first-of-type){margin-top:0}.control-group h2{margin-top:0;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #ecf0f1}.controls-container{padding-left:0;margin-right:0}.controls{gap:5px}.design-color-control,.pattern-color-control{margin-top:8px;margin-bottom:10px;padding-bottom:10px}.zoom-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;position:absolute;bottom:10px;left:10px}.design-comparison{display:flex;flex-direction:column;align-items:center;gap:15px}.design-comparison{flex-direction:column}.design-arrow{transform:rotate(90deg);margin:10px 0}#design-choice-container .popup-buttons{display:flex;justify-content:center;gap:20px}#design-choice-container .popup-buttons button{flex:1;max-width:250px}}@media (min-width:769px){.canvas-container{justify-content:center;padding:20px;height:calc(100vh - 40px)}.action-buttons{position:fixed;bottom:48px;right:48px;z-index:200;width:auto;background:0 0;box-shadow:none;padding:0}.pattern-slider-container,.slider-container{max-width:300px;margin:10px auto}.zoom-controls{display:none}}