*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex}.content{gap:24px;width:100%;padding:20px;display:flex}.main-section{flex-direction:column;flex:1;gap:20px;display:flex}.canvas-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff;border-radius:16px;padding:24px;box-shadow:0 20px 40px #0000001a}.canvas-title{color:#2d3748;text-align:center;margin-bottom:16px;font-size:24px;font-weight:700}.box{box-sizing:border-box;border:3px dashed #e2e8f0;border-radius:12px;width:100%;max-width:540px;height:400px;margin:0 auto;transition:all .3s;overflow:hidden}.box:hover{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.controls-section{background:#fff;border-radius:16px;padding:24px;box-shadow:0 20px 40px #0000001a}.controls-title{color:#2d3748;align-items:center;gap:8px;margin-bottom:20px;font-size:18px;font-weight:600;display:flex}.controls-title:before{content:"🎨";font-size:20px}.image-list{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.image-item{cursor:pointer;border-radius:12px;transition:all .3s;position:relative;overflow:hidden}.image-item:hover{transform:translateY(-4px);box-shadow:0 12px 24px #667eea26}.image-list img{object-fit:cover;border:2px solid #0000;border-radius:12px;width:80px;height:80px;transition:all .3s}.image-item:hover img{border-color:#667eea}.button-group{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.btn{cursor:pointer;border:none;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .3s;position:relative;overflow:hidden}.btn-primary{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.btn-secondary{color:#8b4513;background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%)}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.btn:active{transform:translateY(0)}.sidebar{background:#fff;border-radius:16px;width:320px;max-height:calc(100vh - 40px);padding:24px;overflow-y:auto;box-shadow:0 20px 40px #0000001a}.sidebar-title{color:#2d3748;align-items:center;gap:8px;margin-bottom:20px;font-size:18px;font-weight:600;display:flex}.sidebar-title:before{content:"⚙️";font-size:20px}.property-group{margin-bottom:20px}.property-label{color:#4a5568;text-transform:capitalize;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.property-input{background:#f7fafc;border:2px solid #e2e8f0;border-radius:8px;width:100%;padding:12px 16px;font-size:14px;transition:all .3s}.property-input:focus{background:#fff;border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.property-input:disabled{color:#a0aec0;cursor:not-allowed;background:#e2e8f0}.property-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276,9 12,15 18,9%27%3e%3c/polyline%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px}.color-input-group{flex-direction:column;gap:12px;display:flex}.color-input-wrapper{align-items:center;gap:8px;display:flex}.color-input{cursor:pointer;background:0 0;border:2px solid #e2e8f0;border-radius:8px;width:50px;height:40px;padding:0;transition:all .3s}.color-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.color-preview{cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border:2px solid #e2e8f0;border-radius:8px;width:40px;height:40px;position:relative}.color-text-input{flex:1;font-family:Courier New,monospace;font-size:13px}.alpha-slider-wrapper{align-items:center;gap:12px;display:flex}.alpha-label{color:#4a5568;min-width:50px;font-size:12px;font-weight:600}.alpha-slider{cursor:pointer;-webkit-appearance:none;background-color:#0000;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:8px 8px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border-radius:3px;outline:none;flex:1;height:6px;position:relative}.alpha-slider:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 0%,#000 100%);border-radius:3px;position:absolute;top:0;bottom:0;left:0;right:0}.alpha-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:#667eea;border:3px solid #fff;border-radius:50%;width:18px;height:18px;transition:all .2s;box-shadow:0 2px 8px #0003}.alpha-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #0000004d}.alpha-slider::-moz-range-thumb{cursor:pointer;background:#667eea;border:3px solid #fff;border-radius:50%;width:18px;height:18px;transition:all .2s;box-shadow:0 2px 8px #0003}.alpha-value{color:#667eea;text-align:right;min-width:35px;font-size:12px;font-weight:600}.result-section{background:#fff;border-radius:16px;padding:24px;box-shadow:0 20px 40px #0000001a}.result-title{color:#2d3748;align-items:center;gap:8px;margin-bottom:16px;font-size:18px;font-weight:600;display:flex}.result-title:before{content:"🖼️";font-size:20px}.result-image{border-radius:12px;width:100%;max-width:300px;height:auto;margin:0 auto;display:block;box-shadow:0 8px 24px #0000001a}.empty-state{text-align:center;color:#a0aec0;padding:40px 20px;font-style:italic}.loading-placeholder{animation:1.5s ease-in-out infinite pulse}.skeleton-image{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:12px;width:80px;height:80px;animation:1.5s infinite loading}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.btn:hover:after{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:100%}@media (max-width:1200px){.content{flex-direction:column}.sidebar{width:100%;max-height:none}}