.reset-btn{cursor:pointer;display:none}.upload-zone{background:#f8fafc;border:2px dashed #e2e8f0;border-radius:12px;cursor:pointer;padding:60px 20px;text-align:center;transition:.2s}.upload-zone:hover{background:#eef2ff;border-color:#e2e8f0}.btn-upload{background:#6366f1;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;margin-top:10px;padding:10px 24px}.preview-area{display:none;flex-direction:column;gap:24px}.canvas-container{background:url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="10" height="10" fill="%23f1f5f9"/><rect x="10" y="10" width="10" height="10" fill="%23f1f5f9"/></svg>');border:1px solid var(--border);border-radius:8px;cursor:crosshair;max-width:100%;min-height:300px;overflow:hidden;position:relative;resize:both;touch-action:none;width:100%}canvas#sourceCanvas{display:block;height:100%;object-fit:contain;width:100%}#magnifier{background:#fff;box-shadow:0 20px 25px -5px rgba(0,0,0,.3);display:none;pointer-events:none;position:fixed;z-index:9999}#magnifier canvas{border:4px solid #fff;border-radius:12px;display:block;image-rendering:pixelated}.shade-section{margin-top:10px}.shade-grid{border-radius:8px;display:flex;gap:2px;height:60px;overflow:visible}.shade-item{border:2px solid transparent;border-radius:4px;cursor:pointer;flex:1;position:relative;transition:flex .2s ease}.shade-item:hover{border-color:hsla(0,0%,100%,.8);box-shadow:0 0 0 1px rgba(0,0,0,.1);flex:2;z-index:5}@keyframes rainbowBorder{0%{border-color:red}20%{border-color:#f80}40%{border-color:#ff0}60%{border-color:#0f0}80%{border-color:#08f}to{border-color:#8b00ff}}.shade-item.active{animation:rainbowBorder 3s linear infinite;box-shadow:0 0 10px rgba(0,0,0,.2);flex:1.5;z-index:10}.shade-item.active:after{color:#fff;content:"✔";font-size:14px;left:50%;position:absolute;text-shadow:0 1px 3px rgba(0,0,0,.8);top:50%;transform:translate(-50%,-50%)}.palette-container{margin-top:20px}.palette-grid{display:flex;flex-wrap:wrap;gap:10px}.palette-chip{border:1px solid rgba(0,0,0,.05);border-radius:8px;cursor:pointer;flex:1 0 50px;height:60px;position:relative;transition:transform .2s}.palette-chip:hover{transform:translateY(-4px) scale(1.1);z-index:5}.palette-chip span{background:rgba(0,0,0,.4);border-radius:4px;color:#fff;font-size:11px;font-weight:600;left:50%;opacity:0;padding:3px 6px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.2s;white-space:nowrap}.palette-chip:hover span{opacity:1}.color-preview-box{border:1px solid #e2e8f0;border-radius:8px;height:100px;margin-bottom:24px;position:relative}.color-preview-label{background:hsla(0,0%,100%,.9);border-radius:6px;bottom:8px;font-weight:700;padding:4px 8px;position:absolute;right:8px}.info-row{margin-bottom:16px}.info-label{color:#64748b;display:block;margin-bottom:6px}.input-group{display:flex;gap:8px}.input-val{background:#f8fafc;flex:1;font-family:monospace;font-size:.9rem;padding:10px}.btn-copy,.input-val{border:1px solid #e2e8f0;border-radius:6px}.btn-copy{background:#fff;cursor:pointer;width:40px}