*{box-sizing:border-box}html,body{height:100%}body{color:#fff;background:#1a1a1a;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{width:100%;height:100%;min-height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#2a2a2a}::-webkit-scrollbar-thumb{background:#555;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#666}.app{width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.canvas-container{background:#1a1a1a;flex:1 1 0;align-self:stretch;min-width:0;min-height:40vh;position:relative}.canvas-container canvas{vertical-align:top;max-width:100%;display:block}.controls-panel{color:#fff;box-sizing:border-box;background:#2a2a2a;border-left:1px solid #444;width:320px;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-y:auto}.controls-panel h2{text-transform:uppercase;letter-spacing:.5px;color:#ccc;margin:0 0 16px;font-size:14px;font-weight:600}.section{border-bottom:1px solid #444;margin-bottom:28px;padding-bottom:20px}.section:last-of-type{border-bottom:none}.image-slots{grid-template-columns:1fr 1fr;gap:12px;display:grid}.image-slots-five{grid-template-columns:repeat(3,1fr)}.slider-control{flex-direction:column;gap:10px;display:flex}.slider{appearance:none;cursor:pointer;background:#444;border-radius:3px;outline:none;width:100%;height:6px}.slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#4a9eff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 4px #4a9eff80}.slider::-moz-range-thumb{cursor:pointer;background:#4a9eff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 0 4px #4a9eff80}.slider-value{color:#aaa;font-size:12px;font-weight:500}.snap-buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.snap-buttons-five{grid-template-columns:repeat(3,1fr)}.snap-btn{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.3px;background:#3a3a3a;border:1px solid #444;border-radius:4px;padding:10px 8px;font-size:11px;font-weight:600;transition:all .2s}.snap-btn:hover:not(:disabled){background:#4a9eff;border-color:#4a9eff;box-shadow:0 0 8px #4a9eff66}.snap-btn:disabled{opacity:.4;cursor:not-allowed}.info-section{border-top:1px solid #444;margin-top:24px;padding-top:20px}.info-section p{color:#999;margin:0;font-size:12px;line-height:1.5}.image-upload-slot{cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;gap:8px;padding:8px;transition:all .2s;display:flex;position:relative}.image-upload-slot:hover{background:#4a9eff1a}.slot-preview{aspect-ratio:1;background:#1a1a1a;border:2px solid #444;border-radius:4px;width:100%;position:relative;overflow:hidden}.slot-preview img{object-fit:cover;width:100%;height:100%}.clear-btn{color:#fff;cursor:pointer;background:#ff4555;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:18px;font-weight:700;line-height:1;transition:all .2s;display:flex;position:absolute;top:-8px;right:-8px}.clear-btn:hover{background:#ff2a3a;transform:scale(1.1);box-shadow:0 2px 8px #ff455566}.slot-placeholder{aspect-ratio:1;background:#3a3a3a;border:2px dashed #555;border-radius:4px;justify-content:center;align-items:center;width:100%;transition:all .2s;display:flex}.image-upload-slot:hover .slot-placeholder{background:#404040;border-color:#4a9eff}.plus{color:#777;font-size:32px;font-weight:300;line-height:1}.image-upload-slot:hover .plus{color:#4a9eff}.slot-label{color:#aaa;text-transform:uppercase;letter-spacing:.3px;margin:0;font-size:11px;font-weight:600}