.app-header{border-bottom:1px solid var(--border-color);z-index:10;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.logo h1{letter-spacing:-.5px;font-size:1.5rem;font-weight:700}.logo span{color:var(--primary)}@media (width<=768px){.app-header{text-align:center;flex-direction:column;gap:1rem;padding:1rem}}.sidebar{border-radius:var(--radius-lg);flex-direction:column;gap:2rem;width:320px;padding:1.5rem;display:flex;overflow-y:auto}.sidebar-section h3{color:var(--text-main);margin-bottom:.5rem;font-size:1.1rem;font-weight:600}.garment-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.garment-btn{background:var(--surface-light);border:1px solid var(--border-color);color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;padding:.75rem;font-weight:500;transition:all .2s}.garment-btn:hover{background:var(--surface);color:var(--text-main)}.garment-btn.active{border-color:var(--primary);color:var(--primary);background:#6366f11a}.color-presets{flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;display:flex}.color-swatch{border:2px solid var(--border-color);cursor:pointer;border-radius:50%;width:32px;height:32px;transition:transform .2s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--bg-color), 0 0 0 4px var(--primary);transform:scale(1.1)}.custom-color{align-items:center;gap:1rem;display:flex}.custom-color label{color:var(--text-muted);font-size:.9rem}.color-picker{-webkit-appearance:none;border-radius:var(--radius-md);cursor:pointer;background:0 0;border:none;width:32px;height:32px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid var(--border-color);border-radius:4px}.help-text{color:var(--text-muted);margin-bottom:1rem;font-size:.85rem;line-height:1.4}.upload-btn{border:1px dashed var(--border-color);background:0 0;width:100%}.upload-btn:hover{border-color:var(--primary);color:var(--primary)}.add-design-btn{border-style:solid}.highlight-section{border-radius:var(--radius-md);background:#6366f10d;border:1px solid #6366f133;padding:1rem}.clear-btn:hover{text-decoration:underline;color:var(--text-main)!important}@media (width<=768px){.sidebar{gap:1.5rem;width:100%;overflow-y:visible}}.mockup-canvas-wrapper{border-radius:var(--radius-lg);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.canvas-header{z-index:10;pointer-events:none;margin-bottom:1.5rem}.canvas-header h2{text-transform:capitalize;margin-bottom:.25rem;font-size:1.2rem;font-weight:600}.hint-text{color:var(--text-muted);font-size:.9rem}.canvas-area{flex:1;position:relative}.design-3d-controls{z-index:20;flex-direction:column;gap:10px;max-width:300px;display:flex;position:absolute;bottom:20px;right:20px}.design-control-panel{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);background:#1e293bd9;align-items:center;gap:10px;max-height:60vh;padding:10px;display:flex;overflow-y:auto}.design-control-panel::-webkit-scrollbar{width:4px}.design-control-panel::-webkit-scrollbar-track{background:#0000001a}.design-control-panel::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}.control-thumb{object-fit:contain;background:var(--surface);border-radius:4px;width:40px;height:40px}.control-sliders{flex-direction:column;flex:1;gap:4px;display:flex}.control-sliders label{color:var(--text-muted);font-size:.75rem}.control-sliders input[type=range]{width:100%;accent-color:var(--primary)}.remove-btn{color:#ef4444;cursor:pointer;background:0 0;border:none;padding:.5rem;font-size:1rem}.remove-btn:hover{background:#ef44441a;border-radius:4px}@media (width<=768px){.mockup-canvas-wrapper{flex:none;height:75vh;min-height:500px}.canvas-header{padding:1rem!important}.design-3d-controls{max-width:none;bottom:10px;left:10px;right:10px}}:root{--primary:#ef4444;--primary-hover:#dc2626;--bg-color:#050505;--surface:#121212;--surface-light:#1e1e1e;--text-main:#f8fafc;--text-muted:#a3a3a3;--border-color:#2a2a2a;--shadow-sm:0 1px 2px 0 #00000026;--shadow-md:0 4px 6px -1px #0000004d, 0 2px 4px -2px #0000004d;--shadow-lg:0 10px 15px -3px #0000004d, 0 4px 6px -4px #0000004d;--shadow-glow:0 0 15px #ef444480;--radius-md:.5rem;--radius-lg:1rem;--radius-xl:1.5rem}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}body{background-color:var(--bg-color);color:var(--text-main);flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--surface-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.glass{-webkit-backdrop-filter:blur(12px);background:#121212b3;border:1px solid #ef444426}.btn{background:var(--surface-light);color:var(--text-main);border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.btn:hover{background:var(--surface);transform:translateY(-1px)}.btn-primary{background:var(--primary)}.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-glow)}.app-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}.main-content{flex:1;gap:1.5rem;padding:1.5rem;display:flex;overflow:hidden}@media (width<=768px){.app-container{height:auto;min-height:100vh;overflow:visible}.main-content{flex-direction:column;gap:1rem;padding:.5rem;overflow:visible}}